Node: nodeName property

Baseline Widely available

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

The read-only nodeName property of Node returns the name of the current node as a string.

Value

A string. Values for the different types of nodes are:

Attr: The value of Attr.name, that is the qualified name of the attribute.
CDATASection: The string "#cdata-section".
Comment: The string "#comment".
Document: The string "#document".
DocumentFragment: The string "#document-fragment".
DocumentType: The value of DocumentType.name
Element: The value of Element.tagName, that is the uppercase name of the element tag if an HTML element, or the lowercase element tag if an XML element (like a SVG or MathML element).
ProcessingInstruction: The value of ProcessingInstruction.target
Text: The string "#text".

Example

This example displays the node names of several nodes

html

This is some HTML:
<div id="d1">Hello world</div>
<!-- Example of comment -->
Text <span>Text</span> Text<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">Not calculated yet.</output>

and the following script:

let node = document.querySelector("body").firstChild;
let result = "Node names are:\n";
while (node) {
  result += `${node.nodeName}\n`;
  node = node.nextSibling;
}

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