In HTML5, DOM provides a powerful element selection API querySelector / querySelectorAll, allows the use of JavaScript code to complete DOM element similar to CSS selectors to select the function. Typically, document.querySelector / querySelectorAll we are used to select DOM elements, but sometimes use querySelector on DOM elements / querySelectorAll method, this time a bit weird.
For example, following such an HTML page (for example page side note, I have added for each element ID, but we do not use ID selectors to select elements):
1 <body> 2 <span id="s0">This is a span direct child of body</span> 3 <div id="d1" style="border: 1px solid red;"> 4 This is div d1 5 <div id="d1-1" style="border: 1px solid blue;"> 6 This is div d1-1 <br/> 7 <span id="d1-1-1">This span d1-1-1</span> 8 </div> 9 <span id="d1-2">This is span d1-2</span> 10 </div> 11 </body>
In this scenario, there are two elements div # d1 sub-elements, namely, div # d1-1 and span # d1-2, and div # d1-1 elements have a span # div-1-1-1 subelements. If I want to select the span # d1-1-1 from the div # d1, if a child element selector, then in jQuery should look like this:
$("#d1").find("div > span")
This code will return span # d1-1-1, is our expected results.
It corresponds to the selector HTML5 API should be written like this:
var d1 = document.querySelector("#d1"); var spans = d1.querySelectorAll("div > span")
You expect the above code will return span # d1-1-1, but in fact the result will be run in conjunction return along with span # d1-1! As shown below:
This ...... really confused me for a while. Check out a little document, although the official explanation did not find, but also understand the basic operation of logic querySelector and querySelectorAll the DOM element.
When calling querySelector / querySelectorAll on a DOM element lookup mechanism is as follows: first place in the context of the document to find all the elements to meet the selector criteria, in the above code, we selector is div> span It is that all of the direct parent of div elements span element. Then, look at which elements is to call the child elements querySelector / querySelectorAll of these elements will be returned. This also explains why d1.querySelectorAll ( "div> span") will return together along with the span # d1-2.
Therefore, call querySelector / querySelectorAll in the DOM element to be careful preferably coupled ID selector for a limited, the above code can be written:
d1.querySelectorAll("#d1 > div > span");
It will accurately return we expected the span # d1-1-1 (of course, is the case, otherwise it more wrong!).
In the W3C official document mentioned use: context (now known as: scope) pseudo-class selectors start to limit the work context, that is to say, write:
d1.querySelectorAll(":scope > div > span");
But the actual test results is Safari 6.0.4 and Chrome 27 all did not work as expected, because the W3C also said, this is not the standard.
In summary, the use of querySelector / querySelectorAll in the DOM element acts a little strange to tell the truth, he is not as you expected or jQuery that we have become accustomed to thinking to deal with, so sometimes you may happen to be able to get to set the correct result, and sometimes it is not what you expect the result set, and the structure and the selectors you use your page DOM elements have a relationship. After know this works, it will not issue inexplicable happened.
Reproduced in: https: //www.cnblogs.com/yuanyq/p/3162635.html