<div id="box">
<span>span</span>
<p>文本段落</p>
<!-- 这里是注释 -->
</div>
var box = document.getElementById('box');
console.dir(box); // childNodes: NodeList(7) [text, span, text, p, text, comment, text] 文本节点为换行符nodeValue: "↵ " children: HTMLCollection(2) [span, p] parentElement: body parentNode: body
// 节点的层次结构
// 父节点 parentNode
console.log(box.parentNode); // <body>…</body>
// 子节点 childNodes
console.log(box.childNodes); // 所有的子节点childNodes: NodeList(7) [text, span, text, p, text, comment, text] 不是子元素
// 找到box中所有的元素
for (var i = 0; i < box.childNodes.length; i++) {
var node = box.childNodes[i];
if (node.nodeType === 1) {
console.log(node); // <span>span</span> <p>文本段落</p>
}
}
// 直接获取子元素的属性 children
console.log(box.children); // HTMLCollection(2) [span, p]