HTML DOM Element parentElement 属性

定义和用法

parentElement 属性返回指定元素的父元素。

parentElementparentNode 的区别在于,如果父节点不是元素节点,则 parentElement 返回 null

document.body.parentNode; // 返回 <html> 元素
document.body.parentElement; // 返回 <html> 元素

document.documentElement.parentNode; // 返回文档节点
document.documentElement.parentElement; // 返回 null(<html> 没有父 ELEMENT 节点)

在大多数情况下,使用哪个属性并不重要,但是 parentNode 可能是最流行的。

该属性是只读的。

HTML 节点与元素

HTML DOM(文档对象模型)中,HTML 文档是拥有(或没有)子节点的节点集合。

节点指的是元素节点、文本节点和注释节点。

元素之间的空白也是文本节点。

而元素只是元素节点。

子节点与子元素

childNodes 返回子节点(元素节点、文本节点和注释节点)。

children 返回子元素(而非文本和注释节点)。

同胞与元素同胞

同胞是“兄弟”和“姐妹”。

同胞是拥有相同父节点的节点(在相同的 childNodes 列表中)。

元素同胞是拥有相同父元素的元素(在相同的 children 列表中)。

实例

例子 1

获取 <li> 元素的父元素的节点名称:

var x = document.getElementById("myLI").parentElement.nodeName;

亲自试一试

例子 2

点击元素 (<span>) 可隐藏其父元素 (<div>):

<div>
  <span onclick="this.parentElement.style.display = 'none';">x</span>
</div>

亲自试一试

语法

node.parentElement

返回值

类型 描述
Element 对象 表示节点的父元素节点。
null 如果该节点没有父节点。

浏览器支持

element.parentElement 是 DOM Level 3 (2004) 特性。

所有浏览器都完全支持它:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持