JavaScript Node parentElement Property

What You’ll Learn

The Node.parentElement property returns the parent Element, or null if there is none. Learn how it differs from parentNode, why html.parentElement is null, and how to safely style a parent.

Introduction

Most of the time you want the parent tag—a div, section, or li. parentElement gives you that Element directly, so you can set styles or classes without worrying that the parent might be the Document.

When you need every parent kind (including Document), use parentNode instead.

Understanding parentElement

MDN: the read-only parentElement property returns the DOM node’s parent Element, or null if the node has no parent or its parent is not a DOM Element. parentNode returns any kind of parent.

• Returns an Element when the parent is a tag.
• Returns null for no parent, or a non-Element parent (e.g. Document).
• Read-only — change structure with DOM methods, not assignment.

📝 Syntax

const parent = node.parentElement;
if (parent) {
  parent.style.color = "red";
}

Return value

An Element, or null if there isn’t one.

⚖️ parentElement vs parentNode

Examples Gallery

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

const child = document.getElementById("child");
const parent = child.parentElement;

console.log(parent.id);       // "wrap"
console.log(parent.nodeName); // "DIV"

wrap
DIV

const node = document.getElementById("child");

if (node.parentElement) {
  node.parentElement.style.color = "red";
  console.log("Parent text color set to red");
}

Parent text color set to red

const html = document.querySelector("html");

console.log(html.parentElement); // null
console.log(html.parentNode);    // document

null
[object Document]

const orphan = document.createElement("div");

console.log(orphan.parentElement); // null
console.log(orphan.parentNode);    // null
console.log(orphan.isConnected);   // false

null
null
false

let el = document.getElementById("child");
const path = [];

while (el) {
  path.push(el.nodeName);
  el = el.parentElement;
}

console.log(path.join(" → ")); // e.g. SPAN → DIV → BODY → HTML

SPAN → DIV → BODY → HTML

🚀 Common Use Cases

• Style / class a wrapper — toggle classes on the parent Element.
• Event helpers — from event.target, reach the nearest parent tag.
• Climb for layout — walk parentElement until a matching selector.
• Avoid Document surprises — prefer over parentNode when you need Element APIs.
• Teach the DOM root — show why html.parentElement is null.

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• For closest matching ancestor, also consider Element.closest().
• Related: ownerDocument, parentNode, firstChild, isConnected, JavaScript hub.

💡 Best Practices