JavaScript Element getAttributeNode() Method

What You’ll Learn

Element.getAttributeNode() is an instance method that returns an Attr node for a named attribute. Learn name, value, and ownerElement, when to prefer getAttribute(), and five try-it labs aligned with MDN.

Introduction

Most day-to-day code uses getAttribute("href") to read a string value. getAttributeNode("href") goes one level deeper: it returns the underlying Attr object so you can inspect attribute-level properties.

MDN recommends getAttributeNode() when you need those Attr details. If you only need the value, stick with getAttribute().

This page is part of JavaScript Element. Related: getAttribute(), getAttributeNames().

Understanding the getAttributeNode() Method

Calling el.getAttributeNode(attrName) looks up one attribute and returns its Attr node, or null if the attribute is not present.

• It is an instance method on Element.
• Return type: Attr or null.
• Attr.value holds the attribute value string.
• Attr.name holds the attribute name.
• Attr.ownerElement points to the owning element (MDN).
• In HTML documents, attrName is lower-cased before lookup (MDN).
• parentNode on Attr is null—not in the tree (MDN).

📝 Syntax

General form of Element.getAttributeNode (MDN):

getAttributeNode(attrName)

Parameters

• attrName — a string containing the name of the attribute.

Return value

An Attr node for the attribute, or null if it does not exist.

Common patterns

const el = document.getElementById("top");

const idAttr = el.getAttributeNode("id");
if (idAttr) {
  console.log(idAttr.name);           // "id"
  console.log(idAttr.value);          // "top"
  console.log(idAttr.ownerElement);   // the <div> element
}

// Value only? Prefer getAttribute:
console.log(el.getAttribute("id"));   // "top"

Examples Gallery

Examples follow MDN Element.getAttributeNode() patterns. Use View Output or Try It Yourself for each case.

// <div id="top"></div>
const t = document.getElementById("top");
const idAttr = t.getAttributeNode("id");

console.log(idAttr.value === "top");
// true

true

const t = document.getElementById("top");

console.log(t.getAttributeNode("lang"));
// null

null

const btn = document.querySelector("button");
const typeAttr = btn.getAttributeNode("type");

console.log(typeAttr.ownerElement === btn);
// true

console.log(typeAttr.parentNode);
// null  (Attr is not in the document tree — MDN)

true
null

const link = document.querySelector("a");

const attr = link.getAttributeNode("href");
const str = link.getAttribute("href");

console.log(typeof attr);       // "object"
console.log(typeof str);        // "string"
console.log(attr.value === str);
// true

object
string
true

const card = document.getElementById("card");
const dataAttr = card.getAttributeNode("data-role");

console.log(dataAttr.name);   // "data-role"
console.log(dataAttr.value);  // "primary"

data-role
primary

🚀 Common Use Cases

• DOM libraries that manipulate Attr nodes directly.
• Reading ownerElement when you only hold an Attr reference.
• Legacy code that predates common getAttribute usage.
• Teaching how attributes relate to elements vs the node tree.
• Interop with element.attributes NamedNodeMap entries.
• XML/SVG tooling where Attr node details matter.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2015).
• Prefer getAttribute() when you only need the value (MDN).
• Attr.parentNode is null—not a tree child (MDN).
• Missing attributes return null, not an empty Attr.
• Related: setAttributeNode(), removeAttributeNode(), getAttributeNodeNS().
• Related: getAttribute(), getAttributeNames(), JavaScript hub.

💡 Best Practices