HTML DOM Element parentElement 屬性

定義和用法

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

parentElement 和 parentNode 的區別在于，如果父節點不是元素節點，則 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 支持 支持 支持 支持