html 遍历子节点,【EASYDOM系列教程】之遍历节点

Node 对象提供了一系列的属性和方法用来利用 DOM 节点树结构中节点的关系实现遍历其中的节点。

关于节点之间的关系，可以参考《DOM树结构》一节有关节点之间关系的内容。

获取父节点

通过 HTML 页面中指定元素查找其父级节点，我们可以使用 Node 对象的 parentNode 属性实现:

pNode = node.parentNode;

在上述语法结构中，parentNode 属性返回指定节点的父节点。

值得注意的是: 一个元素节点的父节点，可能是一个元素节点，也可能是一个文档节点。

以下代码示例，就是通过 parentNode 属性获取指定节点的父节点，再实现其他操作的:

var btn = document.getElementById('btn');

var parentNode = btn.parentNode;

var className = parentNode.className;

className += ' animate';

parentNode.className = className;

获取父元素节点

Node 对象除了提供了 parentNode 属性可以获取指定节点的父节点之外，还提供了 parentElement 属性获取指定节点的父元素节点。

parentElementNode = node.parentElement;

在上述语法结构中，parentElement 属性返回指定节点的父元素节点。

值得注意的是: 如果一个节点没有父节点，或者父节点不是一个元素节点的话，parentElement 属性返回 null。

以下代码示例，就是通过 parentElement 属性获取指定节点的父元素节点，再实现其他操作的:

var btn = document.getElementById('btn');

var parentElement = btn.parentElement;

var className = parentElement.className;

className += ' animate';

parentElement.className = className;

父节点与父元素节点的区别

所谓父节点，并没有指定某个节点的父节点一定是哪个类型的节点。而父元素节点，指定了某个节点的父节点一定是元素节点。

parentNode: 获取指定节点的父节点，其父节点不一定是元素节点。