ywork2020.com

Title

ノードタイプを取得する

目次 (INDEX)

nodeTypeとは

ここで説明するnodeType とは次の語句からなるjavascriptのプロパティです。
node
読み: ノード
意味: 節、結節、節点
type
読み: タイプ
意味: 類、型、種類

目次に戻る

nodeTypeの概要

このプロパティは、ノードのノードタイプを取得することができます。

ノードとはHTML文書がブラウザによって解析された結果として構成されるDOMツリー(文書の内容を表すオブジェクトのツリー) を形成する一つ一つのオブジェクトのことです。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var type = Node.nodeType;

目次に戻る

サンプルコードと実行結果

ここでは、div要素に識別子としてidParentのid属性を付けました。 このidParentの子ノードを取得するためにchildNodesプロパティを使用して 続けてitemメソッドを使いインデックス番号から参照できる各ノードのノードタイプを取得しています。

サンプルコード: HTML
<body>
	<div id="idParent">
		<b>b要素</b>
		テキスト
		<!--コメント-->
	</div>
	<output id="idOutput">innerText</output>
</body>
  • 02: div要素 (idParent)
  • 03: b要素 (エレメントノード)
  • 04: テキスト (テキストノード)
  • 05: コメント (コメントノード)
サンプルコード: script
<script>
	let elmOutput = document.getElementById("idOutput");
	let elmParent = document.getElementById("idParent");
	let strOutput ="";
	strOutput = elmParent.childNodes.item(1).nodeType + " , ";
	strOutput = strOutput + elmParent.childNodes.item(2).nodeType + " , ";
	strOutput = strOutput + elmParent.childNodes.item(3).nodeType;
	elmOutput.innerText = strOutput;
</script>
  • 02: elmOutput (idOutputの要素を参照する変数です)
  • 03: elmParent (idParentの要素を参照する変数です)
  • 04: strOutput (取得するノードタイプを文字情報としてまとめるための変数です)
  • 05-07: 一連の処理 (ノードタイプ取得してstrOutput変数に代入)
  • 08: 出力 (strOutput変数の値をidOutputの要素に書き出しています)
実行結果:
idParent ↓
b要素 テキスト

idOutput ↓
innerText

今回はchildNodesで取得したノードリストのインデックス 1番目、2番目、3番目のアイテムのノードタイプを調べました。 結果を見ていただくと、1 , 3 , 8 という値が返ってきています。 これは以下のような結果となります。

  • item(1)は、 1: エレメントノード
  • item(2)は、 3: テキストノード
  • item(3)は、 8: コメントノード

補足ですが、今回のidParentには5つのノードが含まれています。 上記以外にitem(0)とitem(4)はテキストノードです。つまり要素内の最初と最後はテキストノードが含まれているということです。

次のセクションにノードタイプを一覧表としてまとめておきますので、参考にしてください。

目次に戻る

nodeTypeを使用する上での要点

ノードタイプの値によってノードの判別を行うことができます。 ここではタイプの名称と対応する値を一覧表として掲載しておきます。

名称
ELEMENT_NODE1
ATTRIBUTE_NODE (非推奨)2
TEXT_NODE3
CDATA_SECTION_NODE (非推奨)4
ENTITY_REFERENCE_NODE (非推奨)5
ENTITY_NODE (非推奨)6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE (非推奨)12

(非推奨) は将来的に削除される可能性がありますので値を使った判別処理などには使わないことをお勧めします。

目次に戻る