Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to solve the case problem of QWrap selector tagName". The content of the article is simple and clear, and it is easy to learn and understand. Please follow Xiaobian's train of thought to study and learn "how to solve the case problem of QWrap selector tagName".

For the modern Web front end, Selector is a must. For standard browsers, querySelector is available, while for IE8 standard mode, a Selector engine is required.

Because this project will use QWrap in the code, although some of the code I wrote did not use QWrap, but since you need a Selector engine anyway, you might as well use QWrap.

As a result, a tragic thing happened.

I use the html5-shim/shiv library to get IE to parse the new HTML5 tags correctly. But the QWrap engine can't select the elements of html5 correctly.

Try human flesh selection and find that it is possible, that is, the Selector of QWrap has bug.

After a painstaking struggle, it turns out that the problem lies in line 2 of this function:

Function (a) {sFun.push ('el.tagName== "' + a.toUpperCase () +'"); return';}) .replace (/ ([\ [[]. *) | # ([\ w\ -] +) |\. ([\ w\ -] +) / g className hand id acronym / / acronym

QWrap uses code generation technology, that is, assemble the corresponding functions for selector. This is a rather tricky and advanced technology.

It is not difficult to see that a tag match is generated here, and the code generated for the match "nav" should be: el.tagName== "nav" .toUpperCase ().

Usually the browser returns all uppercase letters when it calls tagName for all HTML elements.

[extra] Why is it capitalized?

Hax: this is a habit inherited from SGML, the ancestor of HTML. For early SGML/HTML writers, perhaps the easiest way to distinguish between tags and body content is to capitalize the tags.

However, according to the famous tattoo guy in the circle, HTML used uppercase because at that time, technology was backward, storage was too tight, and all uppercase saved storage space. (to this effect, I can't remember the details. Please consult Winter with the gossip.)

[/ extra]

Unfortunately, however, html5-shim and almost all similar libraries I know use all lowercase. This is because the mainstream of modern Web standards is to use all lowercase.

[extra] Why did you change the lowercase?

Hax: because it doesn't hurt your eyes or hands.

[/ extra]

Although IE is case-insensitive to the HTML elements it can recognize, for the new elements generated by the createElement nerve knife, it actually regards them as XML-like elements, that is, case-sensitive, so its tagName property will return the initially set case form.

How to fix this problem?

One easy way to think of is to capitalize the tag list in html5-shim. But this approach doesn't work. Because tagName returns the value originally set, that is, if you write

... returns SECTION, if you write

... What is returned is SECtion (that is, the case of start tag), and if you write document.createElement ('sEcTion'), it returns sEcTion.

Obviously, QWrap Selector (or any general script library) should not rely on how web authors write. So this problem must be solved by QW.

In addition, the library should not assume that tagName must return uppercase. Although the specification states that the HTML element tagName should always return uppercase, the library must consider compatibility (that is, the IE issue mentioned here).

In addition, generic scripting libraries should also be forward-looking, such as considering that the Selector engine is used to select XML elements. The current variety of pure JS selector engine is not namespace-aware, so the XML element cannot be selected. But the HTML specification already allows you to mix MathML and SVG directly in HTML. New browsers are already supported.

For example, you can try to look at the following code in FireFox:

X = − b ±b 2 − 4 / a c 2 / a

You can see that $('test'). FirstChild.tagName returns "math" instead of "MATH". Document.querySelector ('# test math') can also select the element correctly.

But QW Selector cannot select the math element.

[expansion]

What happens if you insert document.createElement ('math') into this document?

Note that you are not inserting a MathML element, you need to go through createElementNS, plus the appropriate namespace (http://www.w3.org/1998/Math/MathML)). You are actually inserting a HTML element whose name happens to be "math", whose tagName returns "MATH" in all capitals.

At this point, using getElementsByTagName ('math') or document.querySelectorAll (' math') returns both elements. GetElementsByTagName ('MATH') or document.querySelectorAll (' MATH') only returns the HTML element that happens to be called "math", not the math element of the real MathML. Note: this is the behavior of FF, while currently Chrome returns both, which should be the bug of WebKit.

[/ expand]

Although the main purpose of pure JS Selector engines is forward compatibility, backward compatibility is even better. QW Selector failed in both ways because of this small case problem.

Fortunately, it is easy to fix it.

SFun.push ('el.tagName== "' + a.toUpperCase () +'"')

Change to

SFun.push ('el.tagName.toLowerCase () = = "' + a.toLowerCase () +'"')

That's it.

One might ask, why change it all to toLowerCase ()?

Didn't people say it before? UPPERCASE is the most annoying thing!

Seriously, toLowerCase () is used because this is the behavior specified in the standard. Although it doesn't seem to be any different to replace it all with toUpperCase ().

The result of the above code is consistent with the current behavior of Chrome, that is, even non-HTML namespace elements are compared in a case-insensitive manner. To follow the behavior of FF, you can change it to:

'isHTMLElement (el)? tagName.toLowerCase () = "{a.toLowerCase ()}": tagName = "{a}"'

The above isHTMLElement checks whether an element is a HTML element. Please check the standard to determine the logic. {a} template syntax is used here to make everyone see more clearly, and I also save the effort of typing a lot of quotation marks and plus marks.

Thank you for your reading, the above is the content of "how to solve the case problem of QWrap selector tagName". After the study of this article, I believe you have a deeper understanding of how to solve the case problem of QWrap selector tagName. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.