Selectors API(querySelector()方法;querySelectorAll()方法) 元素遍历

63 阅读 0 评论 42 点赞

我是靠谱客的博主大方保温杯，最近开发中收集的这篇文章主要介绍Selectors API(querySelector()方法;querySelectorAll()方法) 元素遍历，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title>Selectors API(querySelector()方法;querySelectorAll()方法) 元素遍历</title>
 7     </head>
 8 
 9     <body>
10 
11     </body>
12     <script>
13         /*
14         querySelector()方法接收一个 CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null。
15         querySelectorAll()方法接收的参数与 querySelector()方法一样，都是一个 CSS 选择符，但返回的是所有匹配的元素而不仅仅是一个元素。
16         这个方法返回的是一个 NodeList 的实例。具体来说，返回的值实际上是带有所有属性和方法的 NodeList，而其底层实现则类似于一组元素
17         的快照，而非不断对文档进行搜索的动态查询。这样实现可以避免使用 NodeList 对象通常会引起的大多数性能问题。
18         与 querySelector()类似，能够调用 querySelectorAll()方法的类型包括 Document、DocumentFragment 和 Element。
19          * */
20         //取得 body 元素
21         var body = document.querySelector("body");
22         //取得 ID 为"myDiv"的元素
23         var myDiv = document.querySelector("#myDiv");
24         //取得类为"selected"的第一个元素
25         var selected = document.querySelector(".selected");
26         //取得类为"button"的第一个图像元素
27         var img = document.body.querySelector("img.button");
28         /*
29          Selectors API Level 2 规范为 Element 类型新增了一个方法 matchesSelector()。这个方法接收
30         一个参数，即 CSS 选择符，如果调用元素与该选择符匹配，返回 true；否则，返回 false。看例子。
31         if (document.body.matchesSelector("body.page1")){
32          //true
33         } */
34         /*
35          元素遍历(详见javascript高级程序设计---DOM扩展)
36          对于元素间的空格，IE9 及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点。这样，
37 就导致了在使用 childNodes 和 firstChild 等属性时的行为不一致。为了弥补这一差异，而同时又保
38 持 DOM 规范不变，Element Traversal 规范（www.w3.org/TR/ElementTraversal/）新定义了一组属性。
39          * */
40          
41     </script>
42 
43 </html>