【JavaScript / DOM】ノードの基本情報- プロパティ（nodeType、nodeName、nodeValue、innerHTML、outerHTMLなど）

JavaScript/DOMの『ノードの基本情報』について解説します。

検証環境

JavaScript -

macOS

14.1

ノードの基本情報

ノードには様々なプロパティがあります。

種類を表すnodeTypeやノードのテキストを表すtextContentなどです。

このドキュメントではノードの基本情報を持つプロパティについて解説します。

種類（nodeType）

nodeTypeプロパティはノードの種類を表します。

プロパティは数値になっており、各数値は次の種類に対応しています。

数値	種類
1	要素ノード
2	属性ノード
3	テキストノード
8	コメントノード
9	ドキュメントノード

sample.html

<div id="box">
    <!-- JavaScriptの概要 -->
    <p>JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let box = document.getElementById("box");
    console.log(box.childNodes);
    
    // 要素ノード
    let element = box.childNodes[3];
    console.log(element.nodeType, element);
    
    // 属性ノード
    let attr = box.attributes[0];
    console.log(attr.nodeType, attr);
    
    // テキストノード
    let text = box.childNodes[4];
    console.log(text.nodeType, text);
    
    // コメントノード
    let comment = box.childNodes[1];
    console.log(comment.nodeType, comment);
    
    // ドキュメントノード
    console.log(document.nodeType, document);
</script>

Console

NodeList(5) [text, comment, text, p, text]
1 <p>JavaScriptはプログラミング言語の１つです。</p>
2 id="box"
3 " 主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。 "
8 <!-- JavaScriptの概要 -->
9 #document

ノード名（nodeName）

nodeNameプロパティはノード名を表します。

ノードの種類によってノード名は異なります。

種類	名前
要素ノード	タグ名
属性ノード	属性名
テキストノード	`#text`
コメントノード	`#comment`
ドキュメントノード	`#document`

sample.html

<div id="box">
    <!-- JavaScriptの概要 -->
    <p>JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let box = document.getElementById("box");
    console.log(box.childNodes);
    
    // 要素ノード
    let element = box.childNodes[3];
    console.log(element.nodeName, element);
    
    // 属性ノード
    let attr = box.attributes[0];
    console.log(attr.nodeName, attr);
    
    // テキストノード
    let text = box.childNodes[4];
    console.log(text.nodeName, text);
    
    // コメントノード
    let comment = box.childNodes[1];
    console.log(comment.nodeName, comment);
    
    // ドキュメントノード
    console.log(document.nodeName, document);
</script>

Console

NodeList(5) [text, comment, text, p, text]
P <p>JavaScriptはプログラミング言語の１つです。</p>
id id="box"
#text " 主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。 "
#comment <!-- JavaScriptの概要 -->
#document #document

値（nodeValue）

nodeValueプロパティはノードの値を表します。

ノードの種類によってノードの値が意味するモノが異なります。

種類	名前
要素ノード	`null`
属性ノード	属性値
テキストノード	テキスト
コメントノード	コメントテキスト
ドキュメントノード	`null`

sample.html

<div id="box">
    <!-- JavaScriptの概要 -->
    <p>JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let box = document.getElementById("box");
    console.log(box.childNodes);
    
    // 要素ノード
    let element = box.childNodes[3];
    console.log(element.nodeValue, element);
    
    // 属性ノード
    let attr = box.attributes[0];
    console.log(attr.nodeValue, attr);
    
    // テキストノード
    let text = box.childNodes[4];
    console.log(text.nodeValue, text);
    
    // コメントノード
    let comment = box.childNodes[1];
    console.log(comment.nodeValue, comment);
    
    // ドキュメントノード
    console.log(document.nodeValue, document);
</script>

Console

NodeList(5) [text, comment, text, p, text]
null <p>JavaScriptはプログラミング言語の１つです。</p>
box id="box"
主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。 " 主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。 "
JavaScriptの概要  <!-- JavaScriptの概要 -->
null #document

テキスト（textContent）

textContentプロパティはノードのテキスト値を表します。

sample.html

<div id="box">
    <!-- JavaScriptの概要 -->
    <p>JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let box = document.getElementById("box");
    console.log(box.childNodes);
    
    // 要素ノード
    let element = box.childNodes[3];
    console.log(element.textContent, element);
    
    // 属性ノード
    let attr = box.attributes[0];
    console.log(attr.textContent, attr);
    
    // テキストノード
    let text = box.childNodes[4];
    console.log(text.textContent, text);
    
    // コメントノード
    let comment = box.childNodes[1];
    console.log(comment.textContent, comment);
    
    // ドキュメントノード
    console.log(document.textContent, document);
</script>

Console

NodeList(5) [text, comment, text, p, text]
JavaScriptはプログラミング言語の１つです。 <p>JavaScriptはプログラミング言語の１つです。</p>
box id="box" 
主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。 " 主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。 "
JavaScriptの概要  <!-- JavaScriptの概要 -->
null #document

基本的にはnodeValueと同様の値が取得できますが、要素ノードは子孫ノード（下階層のノード）のテキスト（改行やインデント等）も含みます。

sample.html

<div id="box">
    <!-- JavaScriptの概要 -->
    <p>JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let box = document.getElementById("box");
    
    console.log(box.nodeValue);
    
    console.log(box.textContent);
</script>

Console

null
    
    JavaScriptはプログラミング言語の１つです。
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。

レンダリングテキスト（innerText）

innerTextプロパティはノードのレンダリングテキストを表します。

※ レンダリングテキストはブラウザに表示されるテキストです。

sample.html

<div id="box">
    <!-- JavaScriptの概要 -->
    <p>JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let box = document.getElementById("box");
    console.log(box.childNodes);
    
    // 要素ノード
    let element = box.childNodes[3];
    console.log(element.innerText, element);
    
    // 属性ノード
    let attr = box.attributes[0];
    console.log(attr.innerText, attr);
    
    // テキストノード
    let text = box.childNodes[4];
    console.log(text.innerText, text);
    
    // コメントノード
    let comment = box.childNodes[1];
    console.log(comment.innerText, comment);
    
    // ドキュメントノード
    console.log(document.innerText, document);
</script>

Console

NodeList(5) [text, comment, text, p, text]
JavaScriptはプログラミング言語の１つです。 <p>JavaScriptはプログラミング言語の１つです。</p>
undefined id="box"
undefined " 主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。 "
undefined <!-- JavaScriptの概要 -->
undefined #document

ノード内のHTMLドキュメント（innerHTML）

innerHTMLプロパティはノード内のHTMLドキュメントを表します。

sample.html

<div id="box">
    <!-- JavaScriptの概要 -->
    <p>JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let box = document.getElementById("box");
    console.log(box.childNodes);
    
    // 要素ノード
    let element = box.childNodes[3];
    console.log(element.innerHTML, element);
    
    // 属性ノード
    let attr = box.attributes[0];
    console.log(attr.innerHTML, attr);
    
    // テキストノード
    let text = box.childNodes[4];
    console.log(text.innerHTML, text);
    
    // コメントノード
    let comment = box.childNodes[1];
    console.log(comment.innerHTML, comment);
    
    // ドキュメントノード
    console.log(document.innerHTML, document);
</script>

Console

NodeList(5) [text, comment, text, p, text]
JavaScriptはプログラミング言語の１つです。 <p>JavaScriptはプログラミング言語の１つです。</p>
undefined id="box"
undefined " 主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。 "
undefined <!-- JavaScriptの概要 -->
undefined #document

上記サンプルではinnerTextプロパティと同様の値に見えますが、div要素（id属性値がbox）のinnerHTML要素で比較すると違いが分かります。

sample.html

<div id="box">
    <!-- JavaScriptの概要 -->
    <p>JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let box = document.getElementById("box");
    
    console.log(box.innerText);
    console.log(box.innerHTML);
</script>

Console

JavaScriptはプログラミング言語の１つです。

主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。

    <!-- JavaScriptの概要 -->
    <p>JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。

innerTextはレンダリングテキストのみに対し、innerHTMLはタグ要素やコメントも含んでいます。

ノードを含むHTMLドキュメント（outerHTML）

outerHTMLプロパティはノード自身を含むHTMLドキュメントを表します。

sample.html

<div id="box">
    <!-- JavaScriptの概要 -->
    <p>JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let box = document.getElementById("box");
    console.log(box.childNodes);
    
    // 要素ノード
    let element = box.childNodes[3];
    console.log(element.outerHTML, element);
    
    // 属性ノード
    let attr = box.attributes[0];
    console.log(attr.outerHTML, attr);
    
    // テキストノード
    let text = box.childNodes[4];
    console.log(text.outerHTML, text);
    
    // コメントノード
    let comment = box.childNodes[1];
    console.log(comment.outerHTML, comment);
    
    // ドキュメントノード
    console.log(document.outerHTML, document);
</script>

Console

NodeList(5) [text, comment, text, p, text]
<p>JavaScriptはプログラミング言語の１つです。</p> <p>JavaScriptはプログラミング言語の１つです。</p>
undefined id="box"
undefined " 主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。 "
undefined <!-- JavaScriptの概要 -->
undefined #document