nodeType でノードの種類を判定する
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 を意識する場面は減っています。
14views
