Node: nodeName プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

nodeName は Node の読み取り専用プロパティで、現在のノードの名前を文字列で返します。

値

文字列です。ノードの種類によって、次のような値になります。

Attr: Attr.name の値で、この属性の修飾名です。
CDATASection: "#cdata-section" という文字列です。
Comment: "#comment" という文字列です。
Document: "#document" という文字列です。
DocumentFragment: "#document-fragment" という文字列です。
DocumentType: DocumentType.name の値です。
Element: Element.tagName の値です。これは HTML 要素であればその要素のタグの大文字の名前であり、 XML 要素（SVG や MathML の要素）であればその要素のタグの小文字の名前です。
ProcessingInstruction: ProcessingInstruction.target の値です。
Text: "#text" という文字列です。

例

この例では、様々なノードのノード名を表示します。

html

こちらは HTML です。
<div id="d1">Hello world</div>
<!-- コメントの例 -->
テキスト<span>テキスト</span> テキスト<br />
<svg height="20" width="20">
  <circle cx="10" cy="10" r="5" stroke="black" stroke-width="1" fill="red" />
</svg>
<hr />
<output id="result">まだ出力されていません。</output>

また、スクリプトは以下の通りです。

let node = document.querySelector("body").firstChild;
let result = "ノード名:<br/>";
while (node) {
  result += `${node.nodeName}<br/>`;
  node = node.nextSibling;
}

const output = document.getElementById("result");
output.innerHTML = result;