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: 获取指定节点的父节点,其父节点不一定是元素节点。