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>
