HTML要素.parentNode / parentElement 対応: DOM Level 1（1998）

HTML要素の親要素を取得するプロパティです。『parentNode』は親ノードを返し、『parentElement』は親要素がHTML要素の場合のみ返します。

構文

// 親ノードを取得します。
var parent = element.parentNode;

// 親要素がHTML要素の場合のみ取得します。
var parent = element.parentElement;

プロパティ一覧

プロパティ	概要
parentNode	親ノードを返します。親ノードはHTML要素のほか、DocumentやDocumentFragmentの場合もあります。親が存在しない場合は『null』を返します。
parentElement	親ノードがHTML要素の場合のみ返します。親がDocumentなどHTML要素でない場合は『null』を返します。

サンプルコード

<div id="container">
	<ul id="list">
		<li id="item">項目1</li>
	</ul>
</div>

var item = document.querySelector("#item");

// 親要素を取得します。
console.log(item.parentNode); // ul#list が返されます。
console.log(item.parentElement); // ul#list が返されます。

// 親の親をたどることもできます。
console.log(item.parentNode.parentNode); // div#container が返されます。

// html要素の親はDocumentのため、parentElementは『null』になります。
var html = document.documentElement;
console.log(html.parentNode); // #document が返されます。
console.log(html.parentElement); // 『null』が返されます。

概要

『HTML要素.parentNode』と『HTML要素.parentElement』はどちらもHTML要素の親を取得するプロパティです。通常のDOM操作ではどちらを使っても同じ結果になりますが、『<html>』要素の親はDocumentノードであるため、その場合のみ動作が異なります。『parentNode』はDocumentを返しますが、『parentElement』はHTML要素ではないため『null』を返します。

よく使われるパターンとして、子要素から親要素を取得して『親HTML要素.removeChild()』で子要素を削除する方法があります。ただし、単純にHTML要素を削除したいだけであれば『HTML要素.remove()』を使用する方が簡潔です。

祖先方向にHTML要素を検索したい場合は『HTML要素.closest()』を使用すると、セレクタ指定で効率的に目的のHTML要素を見つけられます。