Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- JavaScript辞典
- HTML要素.parentNode / parentElement
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』が返されます。
実行結果
item.parentNode; // <ul id="list">...</ul> item.parentElement; // <ul id="list">...</ul> item.parentNode.parentNode; // <div id="container">...</div> html.parentNode; // #document 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要素を見つけられます。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする