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』を返します。

サンプルコード

sample_parentNode.html

<div id="bureau">
	<ul id="inspectors">
		<li id="kogami">狡噛慎也</li>
		<li id="tsunemori">常守朱</li>
	</ul>
</div>

sample_parentNode.js

var kogami = document.getElementById("kogami");

// パターン1: 直接の親要素を取得する
console.log(kogami.parentNode.id);     // 『inspectors』と出力されます。
console.log(kogami.parentElement.id);  // 『inspectors』と出力されます。

// パターン2: 親の親をたどる
console.log(kogami.parentNode.parentNode.id); // 『bureau』と出力されます。

// パターン3: 親要素のテキストを変更する
var list = kogami.parentNode;
list.style.listStyleType = "none";

// パターン4: 子要素を通じて親要素を特定してから操作する
var tsunemori = document.getElementById("tsunemori");
var parent = tsunemori.parentElement;
console.log(parent.children.length); // 『2』と出力されます（ul内のli数）。

// パターン5: html要素の親はDocumentのためparentElementはnullになる
var html = document.documentElement;
console.log(html.parentNode.nodeName); // 『#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要素を見つけられます。