JavaScript parentNode
last modified April 2, 2025
In this article, we explore the parentNode property in JavaScript.
This property is essential for DOM traversal, allowing developers to access an
element's direct parent in the document hierarchy.
Basic Definition
The parentNode property returns the parent node of the specified
element in the DOM tree. Every node in the DOM has a parent, except for the root
document node.
The parent node can be an element node, a document node, or a document fragment
node. If the node has no parent, parentNode returns null.
Basic parentNode Example
This example demonstrates how to access the parent of a simple div element.
<!DOCTYPE html>
<html>
<head>
<title>Basic parentNode</title>
</head>
<body>
<div id="parent">
<p id="child">Child element</p>
</div>
<script>
const child = document.getElementById('child');
const parent = child.parentNode;
console.log(parent.id); // Outputs: parent
</script>
</body>
</html>
In this basic example, we have a div element containing a paragraph. The
JavaScript code gets the paragraph element, then accesses its parent using
parentNode.
This demonstrates the fundamental usage of parentNode to navigate
up the DOM tree. The parent element's ID is then logged to the console.
Changing Parent Element Style
This example shows how to modify the style of a parent element using parentNode.
<!DOCTYPE html>
<html>
<head>
<title>Parent Style Change</title>
</head>
<body>
<div id="container">
<button id="myButton">Change Parent Color</button>
</div>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
const parent = button.parentNode;
parent.style.backgroundColor = 'lightblue';
parent.style.padding = '20px';
});
</script>
</body>
</html>
Here we have a button inside a div container. When clicked, the button uses
parentNode to access its parent div and modify its style.
This demonstrates how parentNode can be used in event handlers to
dynamically modify parent elements. The style changes are applied directly to
the parent container.
Removing a Child from Its Parent
This example demonstrates how to remove an element from its parent using parentNode.
<!DOCTYPE html>
<html>
<head>
<title>Remove Child</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li id="removeMe">Item 2</li>
<li>Item 3</li>
</ul>
<button onclick="removeItem()">Remove Item</button>
<script>
function removeItem() {
const item = document.getElementById('removeMe');
const parent = item.parentNode;
parent.removeChild(item);
}
</script>
</body>
</html>
In this example, we have a list with three items. The button triggers a function
that removes the second list item by accessing its parent and calling
removeChild.
This shows how parentNode is often used with removeChild
to delete elements from the DOM. The parent reference is necessary for this
operation.
Checking Parent Node Type
This example demonstrates how to check the type of a parent node.
<!DOCTYPE html>
<html>
<head>
<title>Check Parent Type</title>
</head>
<body>
<div id="wrapper">
<p id="text">Sample text</p>
</div>
<script>
const text = document.getElementById('text');
const parent = text.parentNode;
if (parent.nodeType === Node.ELEMENT_NODE) {
console.log('Parent is an element node');
} else if (parent.nodeType === Node.DOCUMENT_NODE) {
console.log('Parent is the document node');
}
</script>
</body>
</html>
Here we examine the type of a paragraph's parent node using nodeType.
The code checks whether the parent is an element node or document node.
This demonstrates how parentNode can be used with node type checks
to ensure you're working with the expected kind of parent element in your code.
Traversing Multiple Levels Up
This example shows how to traverse multiple levels up the DOM tree using parentNode.
<!DOCTYPE html>
<html>
<head>
<title>Multi-level Traversal</title>
</head>
<body>
<div id="grandparent">
<div id="parent">
<span id="child">Click me</span>
</div>
</div>
<script>
const child = document.getElementById('child');
child.addEventListener('click', function() {
const parent = child.parentNode;
const grandparent = parent.parentNode;
console.log('Parent ID:', parent.id);
console.log('Grandparent ID:', grandparent.id);
});
</script>
</body>
</html>
In this example, we have a nested structure with grandparent, parent, and child
elements. The click handler traverses up two levels using parentNode.
This demonstrates how multiple parentNode calls can navigate up
through the DOM hierarchy. Each call moves up one level in the tree structure.
Source
In this article, we have shown how to use the parentNode property
in JavaScript. This property is fundamental for DOM traversal and manipulation
in web development.
Author
List all JS DOM tutorials.