什么都不说，先上总结的图~

 

 

Selectors API(选择符API)

querySelector()方法

接收一个css选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null．

//取得 body 元素 var body = document.querySelector("body");  //取得 ID 为"myDiv"的元素 var myDiv = document.querySelector("#myDiv");  //取得类为"selected"的第一个元素 var selected = document.querySelector(".selected");  //取得类为"button"的第一个图像元素 var img = document.body.querySelector("img.button");

通过Document类型调用querySelector()时，会在文档元素的范围内查找匹配的元素

通过Element类型调用querySelector()时，只会在该元素后代元素的范围内查找匹配的元素．

如果传入不被支持的css选择符，querySelector()会抛出错误．

querySelectorAll()方法

querySelectorAll()参数也是一个CSS选择符，返回的是所匹配的元素而不是仅仅一个元素，这个方法返回的是一个NodeList实例．如果没有找到匹配的元素，NodeList就是空的．

具体的说，返回的值实际上是带有所有属性和方法的NodeList，而底层实现则类似于一组元素的快照，而非不断对文档进行搜索的动态查询．这样可以避免使用NodeList对象通常会引起的大多数性能问题．

//取得某<div>中的所有<em>元素(类似于 getElementsByTagName("em")) var ems = document.getElementById("myDiv").querySelectorAll("em");  //取得类为"selected"的所有元素 var selecteds = document.querySelectorAll(".selected");  //取得所有<p>元素中的所有<strong>元素 var strongs = document.querySelectorAll("p strong");

matchesSelector()方法

Selectors API Level 2规范为Element类型新增了这个方法，该方法接收一个参数，即CSS选择符，如果调用元素和该选择符匹配，返回true；否则返回false

if (document.body.matchesSelector("body.page1")){     //true }

在取得某个元素引用的情况下，使用这个方法能够方便的检测它是否会被querySelector()或querySelectorAll()方法返回．

元素遍历

对于元素间的空格, IE9 及之前版本不会返回文本节点,而其他所有浏览器都会返回文本节点。这样,就导致了在使用 childNodes 和 firstChild 等属性时的行为不一致。为了弥补这一差异,而同时又保持 DOM规范不变,Element Traversal 规范新定义了一组属性。
Element Traversal API 为 DOM 元素添加了以下 5 个属性。

• childElementCount :返回子元素(不包括文本节点和注释)的个数。
• firstElementChild :指向第一个子元素; firstChild 的元素版。
• lastElementChild :指向最后一个子元素; lastChild 的元素版。
• previousElementSibling :指向前一个同辈元素; previousSibling 的元素版。
• nextElementSibli