【JavaScript / DOM】ノードの基本情報を取得 - ノードプロパティ
JavaScript/DOMのノードの基本情報を取得するプロパティやメソッドを解説します。
種類（nodeType）
ノードの種類を取得するには、nodeTypeプロパティを使います。
<div id="box">
<h1>JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
</div>
<script type="text/javascript">
let element = document.getElementById('box');
console.log(element.nodeType);
</script>1種類は数値で表され、種類に対応しています。
代表的な種類は次の通りです。
| 数値 | 種類 |
|---|---|
| 1 | 要素ノード |
| 2 | 属性ノード |
| 3 | テキストノード |
| 8 | コメントノード |
| 9 | ドキュメントノード |
| 10 | ドキュメントタイプノード |
ノード名（nodeName）
ノードの名前を取得するには、nodeNameプロパティを使います。
<div id="box">
<h1>JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
</div>
<script type="text/javascript">
let element = document.getElementById('box');
console.log(element.nodeName);
</script>DIV上記サンプルは要素ノードのタグ名が取得されていますが、取得する名前はノードの種類によって異なります。
| 種類 | 名前 |
|---|---|
| 要素ノード | タグ名 |
| 属性ノード | 属性名 |
| テキストノード | #text（文字列） |
| コメントノード | #comment（文字列） |
| ドキュメントノード | #document（文字列） |
| ドキュメントタイプノード | DocumentType.name（htmlなど） |
値（nodeValue）
ノードの値を取得するには、nodeValueプロパティを使います。
<div id="box">
<h1>JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
</div>
<script type="text/javascript">
let element = document.getElementById('box');
console.log(element.nodeValue);
</script>null上記サンプルはnullが取得されていますが、取得する値はノードの種類によって異なります。
| 種類 | 名前 |
|---|---|
| 要素ノード | null |
| 属性ノード | 属性値 |
| テキストノード | テキスト |
| コメントノード | コメントテキスト |
| ドキュメントノード | null |
| ドキュメントタイプノード | null |
テキスト（textContent）
ノードの値を取得するには、textContentプロパティを使います。
<div id="box">
<h1>JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
</div>
<script type="text/javascript">
let element = document.getElementById('box');
console.log(element.textContent);
</script> JavaScriptとは
JavaScriptはプログラミング言語の１つです。このプロパティはノードと子孫ノードのテキスト、HTMLドキュメントのインデントや改行を含んで表示します。
レンダリングテキスト（innerText）
ノードのレンダリングテキストを取得するには、innerTextプロパティを使います。
※ レンダリングテキストはブラウザに表示されるテキストです。
<div id="box">
<h1>JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
</div>
<script type="text/javascript">
let element = document.getElementById('box');
console.log(element.innerText);
</script>JavaScriptとは
JavaScriptはプログラミング言語の１つです。HTML（innerHTML）
ノードのHTMLを取得するには、innerHTMLプロパティを使います。
<div id="box">
<h1>JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
</div>
<script type="text/javascript">
let element = document.getElementById('box');
console.log(element.innerHTML);
</script> <h1>JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>自身を含むHTML内容（outerHTML）
ノードの自身を含むHTMLを取得するには、outerHTMLプロパティを使います。
<div id="box">
<h1>JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
</div>
<script type="text/javascript">
let element = document.getElementById('box');
console.log(element.outerHTML);
</script><div id="box">
<h1>JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
</div>
