JavaScript Node nodeName Property

What You’ll Learn

The Node.nodeName property returns a string naming the current node. Learn HTML uppercase tags vs SVG lowercase names, special values like #text and #comment, and how nodeName compares to tagName.

Introduction

Every DOM node has a name string. For elements that name is the tag (like DIV). For text and comments, the DOM uses fixed labels such as #text and #comment.

You will see nodeName often in debugging and in sibling walks—pair it with nextSibling to print what each node is.

Understanding nodeName

MDN: the read-only nodeName property returns the name of the current node as a string. The exact value depends on the node type.

• Element — same as Element.tagName (HTML: usually uppercase).
• Text — "#text".
• Comment — "#comment".
• Document — "#document"; fragment — "#document-fragment".
• Attr — the attribute’s qualified name (Attr.name).

📝 Syntax

const name = node.nodeName;
console.log(name); // e.g. "DIV", "#text", "#comment"

Return value

A string naming the node (never null for a valid node).

📚 Common nodeName Values

⚖️ nodeName vs tagName

Examples Gallery

Examples follow MDN Node.nodeName patterns. Use View Output or Try It Yourself for each case.

const d1 = document.getElementById("d1");
console.log(d1.nodeName); // "DIV"

DIV

const p = document.getElementById("para");
console.log(p.firstChild.nodeName); // "#text" (pretty-printed HTML)

#text

const wrap = document.getElementById("wrap");
const comment = wrap.childNodes[1]; // after a leading #text in pretty HTML
console.log(comment.nodeName); // "#comment"

#comment

const el = document.getElementById("d1");
console.log(el.nodeName); // "DIV"
console.log(el.tagName);  // "DIV"

const text = el.firstChild;
console.log(text.nodeName); // "#text"
// text.tagName → undefined (tagName is Element-only)

DIV
DIV
#text

let node = document.getElementById("sample").firstChild;
let result = "Node names are:\n";

while (node) {
  result += `${node.nodeName}\n`;
  node = node.nextSibling;
}

console.log(result);

Node names are:
#text
DIV
#text
#comment
#text
SPAN
#text

🚀 Common Use Cases

• Debug sibling walks — log each node’s name while using nextSibling.
• Skip text nodes — continue when nodeName === "#text".
• Tag checks — compare with toLowerCase() for HTML elements.
• Mixed trees — identify comments vs elements vs text in one loop.
• Teach the DOM — show why indented HTML creates many #text names.

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• HTML element names are usually uppercase; do not hard-code lowercase without normalizing.
• Related: nextSibling, nodeType, firstChild, childNodes, JavaScript hub.

💡 Best Practices