nodeType は、ノードの種類を数値で返すプロパティです。テキストノードと要素ノードを区別したいときに使います。
nodeType の値
DOM には様々な種類のノードがあり、nodeType で判別できます。
| 値 | 定数名 | 説明 |
|---|---|---|
| 1 | ELEMENT_NODE | 要素（div, p など） |
| 3 | TEXT_NODE | テキスト |
| 8 | COMMENT_NODE | コメント |
| 9 | DOCUMENT_NODE | document |
| 11 | DOCUMENT_FRAGMENT_NODE | DocumentFragment |
基本的な使い方
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 を意識する場面は減っています。
