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>にはPARENT ELEMENTノードがありません）

多くの場合、どの属性を使用するかは重要ではありませんが、 parentNode 最も人気のあるものかもしれません。

この属性は読み取り専用です。

HTMLノードと要素

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レベル3（2004）の機能です。

すべてのブラウザが完全にサポートしています：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 9-11 サポート サポート サポート サポート