JavaScript Element localName Property

What You’ll Learn

Element.localName is a read-only instance property that returns the local part of an element’s qualified name. Learn how it differs from tagName, why HTML results are lowercase, and how prefixes work in XML/SVG—with five examples and try-it labs.

Introduction

Every element has a name—div, button, circle, and so on. localName gives you that name as stored in the DOM for the local part of a qualified name.

In everyday HTML pages, beginners often compare tags with tagName. That works, but tagName is uppercase for HTML elements ("DIV"), while localName is lowercase ("div"). For namespaced XML/SVG markup, the local name is the part after the colon.

const box = document.getElementById("box");
console.log(box.localName); // "div"
console.log(box.tagName);   // "DIV"

Understanding the Property

MDN: the read-only localName property returns the local part of the qualified name of an element.

• Read-only — inspect the name; you cannot rename via assignment.
• String — returns the local name (never null for Element).
• HTML vs tagName — lowercase local name vs uppercase tagName in HTML DOMs.
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

localName

Value

A string representing the local part of the element’s qualified name. For HTML elements in an HTML document, this is typically lowercase.

📋 MDN Namespace Example Shape

MDN’s classic example uses a namespaced SVG circle (shown conceptually for HTML tutorials):

// For a namespaced element like svg:circle
console.log(circle.localName);    // "circle"
console.log(circle.namespaceURI); // "http://www.w3.org/2000/svg"

In plain HTML pages, start with localName vs tagName on everyday tags, then explore SVG elements with createElementNS.

Related learning: tagName, namespaceURI, and lastElementChild.

Examples Gallery

Examples follow MDN Element: localName. Labs use HTML and SVG elements so you can compare names safely in the browser.

const box = document.getElementById("box");
console.log(box.localName);

div

const btn = document.querySelector("button");
console.log({
  localName: btn.localName,
  tagName: btn.tagName
});

{
  "localName": "button",
  "tagName": "BUTTON"
}

const circle = document.createElementNS(
  "http://www.w3.org/2000/svg",
  "circle"
);
console.log(circle.localName);
console.log(circle.namespaceURI);

circle
http://www.w3.org/2000/svg

function isButton(el) {
  return el.localName === "button";
}
const el = document.querySelector("#go");
console.log(isButton(el));
console.log(el.tagName === "BUTTON");

true
true

console.log({
  supported: "localName" in Element.prototype,
  returns: "string (local part of qualified name)",
  tip: "In HTML, localName is lowercase; tagName is uppercase",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "returns": "string (local part of qualified name)",
  "tip": "In HTML, localName is lowercase; tagName is uppercase",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Checking an element type with lowercase literals (el.localName === "a").
• Avoiding case bugs when mixing tagName and string compares.
• Inspecting SVG/XML elements by their local name (for example circle).
• Logging element kinds while debugging DOM trees.
• Pairing with namespaceURI when namespaces matter.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Read-only—you cannot assign el.localName = ... to rename a node.
• In HTML documents, tagName is uppercase for HTML elements; localName is lowercase.
• Related: lastElementChild, tagName, namespaceURI, namespaceURI, JavaScript hub.

💡 Best Practices