Queryselector and queryselectorall

1 queryselector and queryselectorall are the new Query Interfaces provided by W3C. Their parameters must comply with CSS selector. The difference is that the former returns a DOM object and contains all the nodes under the DOM object, while the latter returns nodelist, which stores array elements of the class.

2 currentlyIE8/9 and Firefox/Chrome/Safari/OperaThe latest version is supported.

 

 1 <div id="box"> 2     <div id="header">header</div> 3     <ul class="ul1"> 4         <li><a href="#">1</a></li> 5         <li><a href="#">2</a></li> 6         <li><a href="#">3</a></li> 7         <li><a href="#">4</a></li> 8     </ul> 9     <ul class="ul2">10         <li><a href="#">5</a></li>11         <li><a href="#">6</a></li>12         <li><a href="#">7</a></li>13         <li><a href="#">8</a></li>14     </ul>15     <div class="content">content</div>16 </div>17 18 <script type="text/javascript">19 20     var box = document.querySelector(‘#box‘);21     var ul1 = document.querySelector(‘.ul1‘);22     var ul = document.querySelectorAll(‘div ul‘);23     console.log(box)24     console.log(ul1)25     console.log(ul)

 

The result of the console is:

1. The whole ID is named all nodes in the box.

Class 2: All nodes under the ul1 Node

3. nodelist is returned.

Nodelist [2]

1. 0: ul. ul1
2. 1: ul. ul2
3. Length: 2
4. _ PROTO __: nodelist