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>