JavaScript Node parentElement Property

What Is parentElement?

node.parentElement returns the parent Element of a node, or null if there is no parent or the parent is not an Element (MDN). Use parentNode when you need any parent type (including Document).

node.parentElement
→ Element parent
→ or null (no parent / parent is not an Element)

parentElement → Element only
parentNode    → any parent (Element, Document, Fragment, …)

Classic:
  html.parentElement → null
  html.parentNode    → document

How to Use parentElement

Read the parent Element, null-check, then use Element APIs.

1. Select a node (element, text, …).
2. Read node.parentElement.
3. If it is not null, use Element features (style, classList, …).
4. Use parentNode if you may need Document / Fragment parents.

Pseudocode

parent = node.parentElement

if parent is null:
  // no Element parent (detached, or parent is Document)
else:
  // safe Element APIs
  parent.style.color = "red"

// climb Element ancestors:
el = node
while el:
  process(el)
  el = el.parentElement

// vs parentNode:
html.parentElement → null
html.parentNode    → document

Cheat Sheet

Keep these facts handy when walking up the DOM.

Live Preview

Compare parentElement / parentNode, style the parent, or climb ancestors.

Choose an action, then Run…

JavaScript Examples

Short, copy-ready snippets based on MDN Node.parentElement. Use Try It Yourself for a live editor.

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

Performance Notes

One parent read is cheap. For “nearest matching ancestor,” prefer element.closest(selector) over a hand-written climb when you already have an Element.

Key Takeaways