html dom 访问子节点,JavaScript DOＭ文档遍历－JS查找父节点、子节点、同级节点

在W3C规范中，将文档对象模型 (DOM) 表示为一棵树，该树由具有属性和方法的不同层次的节点组成。使用 JavaScript对这颗数的节点进行添加、修改、删除等操作时，首先我们需要找到对应的节点。在DOM中，Document对象表示文档的根节点，即：树的根节点，可以通过window.document或document访问该对象。Document对象中包含一些Node(节点)对象，Node对象可以是Element、Text等对象。Node对象提供了一些属性，通过这些属性可以查找文档中的指定位置的元素。

1. 访问父节点：parentNode

node.parentNode

该属性用于返回指定节点的父节点。除document外，所有节点都有父节点，document对象的父节点为null。示例如下：

document.getElementById("myEle").parentNode;

部分浏览器还支持W3C标准外的parentElement属性，该属性只会返回类型为Element父节点。

2. 访问子节点：childNodes

node.childNodes

该属性会返回子节点的Node对象集合(NodeList对象)。示例如下：

document.body.childNodes;

部分浏览器还支持W3C标准外的childElementCount()属性，该属性会返回类型为Element子节点数量。

3. 访问第一个/最后一个子节点：firstNode/lastNode

node.firstChild;

node.lastChild;

这两个属性分别用于访问第一个子节点和最后一个子节点。如果要访问的节点不存在，则返回null。示例如下：

document.firstChild;

document.getElementById("myEle").lastChild;

部分浏览器还支持W3C标准外的firstElementChild和lastElementChild属性，这两个属性分别会返回类型为Element的第一个子节点和最后一个子节点。

4. 访问之前/之后的同级节点：previousSibling/nextSibling

node.previousSibling;

node.nextSibling;

这两个属性分别用于访问之前或之后的同级节点(兄弟节点)。具有相同父节点的节点为兄弟节点，之前或之后表示它们在文档中出现的顺序。示例如下：

document.getElementById("myEle").previousSibling;

document.getElementById("myEle").nextSibling;

部分浏览器还支持W3C标准外的previousElementSibling和nextElementSibling属性，这两个属性分别会返回类型为Element的兄弟节点。

5. 返回元素的根元素：ownerDocument

node.ownerDocument;

ownerDocument属性分别用于返回元素的根节点，即：文档对象(Document)。通过这个属性，我们能够直接访问根元素而不必层层遍历。示例如下：

document.getElementById("myEle").ownerDocument;