Starting with a baffling error---talking about the DOM node creation of jquery

Source: Internet
Author: User
Tags closing tag

There is a string like this: var s = '

How do I get the content value from jquery?

It would have been a simple question, either through regular fetching or by jquery's $ to turn the string into a JQ object to get. But that was the way it was later, but it brought problems.

In my understanding, the method of locating content should be $ (s). Find ("meta"). attr ("content"), but it is not correct to get the results.

So I made a simple attempt:

var s = ' This is a bit strange, the wind big guess is because there is But is this really the right result? Another simple attempt was made:
var s = ' <div>

The reason for this problem, I believe only jq source can give me the answer. Write a few lines of simple test code, go through the breakpoint to read the processing mechanism of JQ:

(function () {        debugger;        $ (' 

It turns out that the latter two are able to get the results correctly, except that the first method does not get the results correctly. This was finally clarified by studying the code created on the JQ object in the JQ source.

JQ will make a regular pass on the incoming string:

var parsed = rsingletag.exec (data);//rsingletag=/^< (\w+) \s*\/?> (?: <\/\1>|) $/

Explain the regular:

^< (\w+) \s*\/?
Start with <, followed by at least one character and any whitespace characters, followed by 0 or 1 times/
>
This will not be said, the above add up is <div > this or <meta/> such
(?: <\/\1>|) $
Can match <, one/or blank and end with
These are </div> or follow the <br/>. The empty behind the self-closing label

This way, if there are no strings of attributes and child nodes (such as '

if (parsed) {            return [Context.createelement (Parsed[1])];        } Context for contexts

Instead of passing the node's string, the string is placed into the DIV's innerhtml by creating a div node:

TMP = TMP | | Safe.appendchild (Context.createelement ("div"));//create divdom node tmp.innerhtml = wrap[1] + elem.replace (Rxhtmltag, "<$ 1></$2> ") + wrap[2];//to place the string into the innerHTML of the Div object

The browser does not allow the div to include the

When the HTML is filtered, the string just now becomes:

JQ will look in the middle to find the end of the node, where the closing tag is looked for as a meta tag.

This is all the conclusions that have been made this time, to summarize:

If your tag is a label that does not have child nodes and attributes, JQ will create the node directly in your incoming context after the regular decision.
If you have a tag with a child node or attribute, the JQ regular will then create a div, pass your string as the innerHTML of the Div, then traverse the attributes and nodes inside the DOM node of the Div, get the class ID, and then create the real node.
However, the browser does not allow any non-frame elements inside the HTML tags, will be filtered.
After filtering the HTML tag, the head tag and the body tag are two tags, and JQ is looking for the label of the package from the outside, so these two tags are not recognized, and the META tag is self-closing tag, and is also the outermost enclosing tag from the inside of the package, So it becomes the tag that gets it.
That's probably it.

Starting with a baffling error---talking about the DOM node creation of jquery

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.