JavaScript DOM
DOM traversal moves from one element to its parent, children or siblings.
Once you have one element, you can reach the ones around it.
This matters most in event handling, where you know which element was clicked.
Example
javascript
document.body.innerHTML = '<div id="box"><p id="demo">Text</p></div>';
const p = document.getElementById("demo");
console.log(p.parentElement.id);The output is box.
parentElement goes up one level.
children, firstElementChild and lastElementChild go down.
nextElementSibling and previousElementSibling go sideways.
Syntax
javascript
element.parentElement;
element.children;
element.nextElementSibling;The Element versions skip text and whitespace nodes.
children is a live collection of the child elements.
Example
javascript
document.body.innerHTML =
'<ul id="list"><li>A</li><li>B</li><li>C</li></ul>';
const list = document.getElementById("list");
console.log(list.children.length);
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);The output is 3, then A, then C.
Siblings share the same parent.
Example
javascript
document.body.innerHTML =
'<ul><li>A</li><li id="middle">B</li><li>C</li></ul>';
const middle = document.getElementById("middle");
console.log(middle.previousElementSibling.textContent);
console.log(middle.nextElementSibling.textContent);The output is A then C.
childNodes and nextSibling include text nodes.
The whitespace between tags counts as a text node, which trips people up.
Example
javascript
document.body.innerHTML = "<div id='box'>\n <p>One</p>\n</div>";
const box = document.getElementById("box");
console.log(box.children.length);
console.log(box.childNodes.length > box.children.length);childNodes is larger because of the whitespace.
closest walks up the tree looking for a match.
It checks the element itself first, then each ancestor.
Example
javascript
document.body.innerHTML =
'<div class="card"><p><span id="tag">Here</span></p></div>';
const tag = document.getElementById("tag");
console.log(tag.closest(".card").className);This is extremely useful with event delegation.
The first child of an empty element, or the sibling after the last one, is null.
Example
javascript
document.body.innerHTML = '<ul id="list"><li id="only">A</li></ul>';
const only = document.getElementById("only");
console.log(only.nextElementSibling === null ? "no sibling" : "has one");Guard before reading a property from a traversal result.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript DOM Traversal</title>
</head>
<body>
<h1>DOM Traversal</h1>
<ul id="list">
<li>First</li>
<li id="middle">Middle</li>
<li>Last</li>
</ul>
<p id="out"></p>
<script>
const middle = document.getElementById("middle");
document.getElementById("out").textContent =
"Parent: " + middle.parentElement.id +
" / Before: " + middle.previousElementSibling.textContent +
" / After: " + middle.nextElementSibling.textContent;
</script>
</body>
</html>Run the above example in the Try It Editor.
Try closest:
Use middle.closest("ul").id to walk up to the list.
parentElement moves up one level.children holds the child elements.nextElementSibling and previousElementSibling move sideways.closest searches upwards for a matching ancestor.Traversal lets one reference reach everything around it.
The Element properties are almost always the ones you want.
closest becomes essential once you reach event delegation.