Terms Privacy

© Rollpie

JavaScript
19 Jan 2026

nodeType でノードの種類を判定する

nodeType は、ノードの種類を数値で返すプロパティです。テキストノードと要素ノードを区別したいときに使います。

nodeType の値

DOM には様々な種類のノードがあり、nodeType で判別できます。

値定数名説明
1ELEMENT_NODE要素（div, p など）
3TEXT_NODEテキスト
8COMMENT_NODEコメント
9DOCUMENT_NODEdocument
11DOCUMENT_FRAGMENT_NODEDocumentFragment

基本的な使い方

const element = document.getElementById('target');
console.log(element.nodeType); // 1（Element）

const text = element.firstChild;
console.log(text.nodeType); // 3（Text）かもしれない

定数を使った判定

数値で比較するより、定数を使うと読みやすくなります。

if (node.nodeType === Node.ELEMENT_NODE) {
  console.log('これは要素です');
}

if (node.nodeType === Node.TEXT_NODE) {
  console.log('これはテキストノードです');
}

childNodes をフィルタする

childNodes から要素だけを取り出すときに使えます。

const parent = document.getElementById('container');
const elements = [];

for (const node of parent.childNodes) {
  if (node.nodeType === Node.ELEMENT_NODE) {
    elements.push(node);
  }
}

ただし、これは children を使えば同じことができます。

// こちらのほうがシンプル
const elements = parent.children;

実際に動かしてみよう

HTML
CSS
JavaScript
<div id="container">
  テキスト1
  <span>スパン要素</span>
  テキスト2
  <!-- コメント -->
  <p>段落要素</p>
</div>
<button id="btn">ノードを調査</button>
<pre id="result"></pre>
document.getElementById('btn').addEventListener('click', () => {
  const container = document.getElementById('container');
  const result = [];
  
  container.childNodes.forEach((node, i) => {
    let type = '';
    if (node.nodeType === 1) type = 'ELEMENT';
    if (node.nodeType === 3) type = 'TEXT';
    if (node.nodeType === 8) type = 'COMMENT';
    result.push(i + ': ' + type);
  });
  
  document.getElementById('result').textContent = result.join('\n');
});

nodeName と tagName

ノードの種類を調べる別の方法として nodeName と tagName があります。

element.nodeName;  // "DIV"（要素なら大文字のタグ名）
element.tagName;   // "DIV"（Element のみ）

textNode.nodeName; // "#text"
textNode.tagName;  // undefined

いつ nodeType を使うか

childNodes を処理するとき

テキストやコメントを除外したい場合に便利

汎用的な関数を作るとき

受け取ったノードが Element かどうかを確認する

ただし、最近は children、firstElementChild などの Element 専用プロパティを使えば、nodeType を意識する場面は減っています。

7 views