Terms Privacy

© Rollpie

JavaScript
18 Jan 2026

parentNode と parentElement

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');
}
9 views