ノードの名前を取得(nodeName)

Node オブジェクトの nodeName プロパティを参照するとノードの名前を取得することができます。ノードの名前はノードの種類によって異なり、常に同じ値を返すノードの種類もありますし、ノードに設定されているタグ名を返すものもあります。ここでは nodeName プロパティの使い方について解説します。

(Last modified: )

ノードの名前を取得する

Node オブジェクトの nodeName プロパティを参照するとノードの名前を取得することができます。書式は次の通りです。 

node.nodeName

戻り値はノードの名前を表す DOMString オブジェクトが戻されます。名前はノードの種類によって異なっています。 

   Node Type                    Node Name
---------------------------------------------------------------
 1 ELEMENT_NODE                 Element.tagNameの値
 2 ATTRIBUTE_NODE               Attr.nameの値
 3 TEXT_NODE                    "#text"
 4 CDATA_SECTION_NODE           "#cdata-section"
 5 ENTITY_REFERENCE_NODE        実体参照名
 6 ENTITY_NODE                  実体名
 7 PROCESSING_INSTRUCTION_NODE  ProcessingInstruction.targetの値 
 8 COMMENT_NODE                 "#comment"
 9 DOCUMENT_NODE                "#document"
10 DOCUMENT_TYPE_NODE           DocumentType.nameの値
11 DOCUMENT_FRAGMENT_NODE       "#document-fragment"
12 NOTATION_NODE                記法名

例えばノードの種類が ELEMENT_NODE (要素ノード) の場合、要素のタグ名がノードの名前として返されます。ノードの種類が TEXT_NODE (テキストノード) の場合、常に "#text" という値がノードの名前として返されます。

サンプルコード

次のサンプルを見てください。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>nodeName</title>
</head>
<body>

<p>今日は外でランチを食べました</p>

<div id="blog">
  <p>朝から外出していたのでランチは外で頂きました。</p>
  <!-- お店の情報 -->
  <div>
    <p>場所：港区南青山</p>
    <p>店名：リストランテ南青山</p>
  </div>
</div>

<button onClick="getElements();">要素を取得</button>

<script>
function getElements(){
    let element = document.getElementById('blog');
    let children = element.childNodes;

    let len = children.length;
    for (let i = 0; i < len; i++){
        console.log(children.item(i).nodeName);
    }
}
</script>
</body>
</html>

表示されたボタンをクリックすると、 id 属性の値が 'blog' のノードを取得し、そのノードの子ノードをすべて取得します。そのあとで、子ノードのノード毎にノードの名前を取得してコンソールに出力しています。

ノードの名前を取得する(1)

「空白ノード」で解説していますが、要素の前後に空白や改行がある場合は空白ノード(テキストノード)が存在します。その為、テキストノードの名前である "#text" が要素ノードやコメントノードの前後に現れています。

-- --

nodeName プロパティの使い方について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。

カテゴリ
検索