parentNode と parentElement は、要素の親を取得するプロパティです。ほとんどの場合は同じ結果になりますが、微妙な違いがあります。
基本的な使い方
<div id="parent"> <p id="child">子要素</p> </div>
const child = document.getElementById('child'); console.log(child.parentNode); // div#parent console.log(child.parentElement); // div#parent
両者の違い
parentNode
親ノードを返す。Element 以外（Document など）も返す可能性がある
parentElement
親要素を返す。必ず Element か null
実際の違いが出るのは、html 要素の親を取得するときです。
const html = document.documentElement; console.log(html.parentNode); // #document console.log(html.parentElement); // null
html の親は Document ノードですが、これは Element ではないため parentElement は null を返します。
実用上はほぼ同じ
通常の DOM 操作では、ほとんど同じように使えます。
const element = document.getElementById('target'); // どちらも同じ結果になることが多い const parent1 = element.parentNode; const parent2 = element.parentElement;
親をたどって探す
親を順番にたどっていくパターンです。
let current = element; while (current.parentElement) { console.log(current.tagName); current = current.parentElement; }
ただし、特定の条件を満たす親を探すなら closest のほうが便利です。
// これより let parent = element.parentElement; while (parent) { if (parent.classList.contains('container')) break; parent = parent.parentElement; } // こちらのほうがシンプル const container = element.closest('.container');
実際に動かしてみよう
HTML
CSS
JavaScript
<div class="grandparent"> <div class="parent"> <button id="btn">親を表示</button> </div> </div> <p id="result"></p>
.grandparent { padding: 20px; background: #e3f2fd; } .parent { padding: 15px; background: #bbdefb; }
document.getElementById('btn').addEventListener('click', function() { const parent = this.parentElement; const grandparent = parent.parentElement; document.getElementById('result').textContent = '親: ' + parent.className + ' / 祖父: ' + grandparent.className; });
どちらを使うべきか
特別な理由がなければ parentElement を使うのがおすすめです。常に Element か null が返るので、型が明確になります。
// parentElement なら Element 型として扱える const parent = element.parentElement; if (parent) { parent.classList.add('active'); }
