DOM Traversal refers to navigating the hierarchy of the DOM to access and manipulate elements relative to other elements. This includes accessing parent nodes, child nodes, and sibling nodes. Here's a detailed look at various DOM traversal methods and properties, with examples to illustrate their use.
1. Parent Nodes
- parentNode: Accesses the parent node of the current element.
- parentElement: Accesses the parent element (returns null if the parent is not an element).
Example:
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversal - Parent Nodes</title>
</head>
<body>
<div id="parent">
<div id="child">Child Element</div>
</div>
<script>
const child = document.getElementById('child');
console.log(child.parentNode); // Output: <div id="parent">...</div>
console.log(child.parentElement); // Output: <div id="parent">...</div>
</script>
</body>
</html>
2. Child Nodes
childNodes: Returns a NodeList of all child nodes (including text nodes).
children: Returns an HTMLCollection of all child elements.
firstChild: Returns the first child node (including text nodes).
lastChild: Returns the last child node (including text nodes).
firstElementChild: Returns the first child element.
lastElementChild: Returns the last child element.
childElementCount: Returns the number of child elements.
Example:
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversal - Child Nodes</title>
</head>
<body>
<div id="parent">
<p>First Child</p>
<p>Second Child</p>
<p>Third Child</p>
</div>
<script>
const parent = document.getElementById('parent');
console.log(parent.childNodes); // Output: NodeList(7) [#text, <p>, #text, <p>, #text, <p>, #text]
console.log(parent.children); // Output: HTMLCollection(3) [<p>, <p>, <p>]
console.log(parent.firstChild); // Output: #text (whitespace)
console.log(parent.lastChild); // Output: #text (whitespace)
console.log(parent.firstElementChild); // Output: <p>First Child</p>
console.log(parent.lastElementChild); // Output: <p>Third Child</p>
console.log(parent.childElementCount); // Output: 3
</script>
</body>
</html>
3. Sibling Nodes
- nextSibling: Accesses the next sibling node (including text nodes).
- previousSibling: Accesses the previous sibling node (including text nodes).
- nextElementSibling: Accesses the next sibling element. previousElementSibling: Accesses the previous sibling element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>DOM Traversal - Sibling Nodes</title>
</head>
<body>
<div id="sibling1">Sibling 1</div>
<div id="sibling2">Sibling 2</div>
<div id="sibling3">Sibling 3</div>
<script>
const sibling2 = document.getElementById('sibling2');
console.log(sibling2.nextSibling); // Output: #text (whitespace)
console.log(sibling2.previousSibling); // Output: #text (whitespace)
console.log(sibling2.nextElementSibling); // Output: <div id="sibling3">Sibling 3</div>
console.log(sibling2.previousElementSibling); // Output: <div id="sibling1">Sibling 1</div>
</script>
</body>
</html>
Summary
Parent Nodes
- parentNode: Accesses the parent node of the current element.
- parentElement: Accesses the parent element (returns null if the parent is not an element).
Child Nodes
- childNodes: Returns a NodeList of all child nodes (including text nodes).
- children: Returns an HTMLCollection of all child elements.
- firstChild: Returns the first child node (including text nodes).
- lastChild: Returns the last child node (including text nodes).
- firstElementChild: Returns the first child element.
- lastElementChild: Returns the last child element.
- childElementCount: Returns the number of child elements.
Sibling Nodes
- nextSibling: Accesses the next sibling node (including text nodes).
- previousSibling: Accesses the previous sibling node (including text nodes).
- nextElementSibling: Accesses the next sibling element.
- previousElementSibling: Accesses the previous sibling element.
Top comments (0)