1、Document对象、它的Element对象和文档中表示文本的Text对象、comment对象都是Node对象。Node定义了以下重要的属性
parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling、NodeType、NodeValue、NodeName(元素的标签名)
其中：
NodeType(节点类型)
1 → 代表Element节点
3 → 代表Text节点
4 → 代表CDATASection节点
8 → 代表Comment(注释)节点
9 → 代表Document节点
11 → 代表DocumentFragment节点
2、当将主要的兴趣集中在文档的元素上而非它们之间的文本(和他们之间的空间)上时，有另一个API
API第一部份：children属性
API第二部份：Element(统称，其中包括firstElementChild、lastElementChild、nextElementSibling、previousElementSibling、childElementCount)属性
Demo如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="wrapper"> <div class="test" id="first"> <span>First text</span> </div> <!-- here is the comment--> <div class="test" id="second">Second text</div> <div class="test" id="third">Third text</div> <div class="test" id="four">Four text</div> <div class="test" id="five">Five text</div> <div class="test" id="six">Six text</div> </div> </body> <script> var $ = function (id) { return document.getElementById(id); }; var e = $("wrapper"); /** * children与Element(firstElementChild等的统称)将主要关注的 * 点集中在元素上，而不是文本上(例如text、comment) */ (function () { console.log(e.children); console.log(e.firstElementChild); console.log(e.lastElementChild); console.log(e.firstElementChild.nextElementSibling); console.log(e.lastElementChild.previousElementSibling); console.log(e.childElementCount);//子元素的数量，返回的值和children.length相等 })(); /** * Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象 * */ (function () { console.log(e.parentNode);// return body的node对象 console.log(e.childNodes);// 返回该节点的子节点的实时表示，包含text、comment console.log(e.firstChild);// 该节点的子节点的第一个，没有则为null console.log(e.lastChild);// 该节点的子节点的最后一个，没有则为null var eFirst = $("first"); console.log(eFirst.nextSibling);// 返回该节点的兄弟节点的下一个节点 console.log(eFirst.nextSibling.nextSibling);// 这里返回注释节点 console.log(eFirst.previousSibling);// 返回该节点的兄弟节点的上一个节点 })(); </script> </html>
返回结果如下：
