Traversing Parents, Children and Siblings
Navigate the DOM tree between related nodes.
Traversing Parents, Children and Siblings is a free JavaScript Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Traverse
Once you have one element, you often need its relatives: the container around it, the items inside it, or the element right next to it. DOM traversal properties let you move around the tree.
parentElement
parentElement gives you the element that contains the current one, or null at the top of the tree.
const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);children
children is a live HTMLCollection of an element’s direct child elements (text nodes are excluded).
const list = document.querySelector("ul");
console.log(list.children.length);firstElementChild and lastElementChild
These jump straight to the first or last child element, skipping any text or comment nodes.
const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);nextElementSibling
nextElementSibling returns the element immediately after the current one within the same parent.
const current = document.querySelector("li.active");
const after = current.nextElementSibling;previousElementSibling
previousElementSibling moves the other direction. Both return null when there is no sibling.
const current = document.querySelector("li.active");
const before = current.previousElementSibling;Element vs Node Properties
Beware: childNodes, nextSibling, and parentNode include text nodes (whitespace). The *Element* versions are usually what you want.
list.childNodes; // includes whitespace text nodes
list.children; // only elementsclosest
closest walks up the tree from the current element and returns the nearest ancestor (or itself) matching a selector.
const btn = document.querySelector(".delete");
const row = btn.closest("tr");closest for Event Delegation
closest is perfect when a click lands on an inner element but you need the outer container that handles it.
function onClick(e) {
const card = e.target.closest(".card");
if (card) {
console.log(card.dataset.id);
}
}matches
matches tests whether an element itself satisfies a selector, returning a boolean. Handy alongside traversal.
const el = document.querySelector(".item");
console.log(el.matches(".item.active"));Combining Traversal
You can chain traversal steps to navigate complex structures, for example from a button up to its row and over to the next row.
const next = btn.closest("tr").nextElementSibling;Quick Check
Choose the correct property.
Recap
You can move up with parentElement and closest, into children with children, firstElementChild, and lastElementChild, and sideways with nextElementSibling and previousElementSibling. Prefer the element-only properties to skip whitespace text nodes.
Frequently asked questions
Is the “Traversing Parents, Children and Siblings” lesson free?
Yes — the full text of “Traversing Parents, Children and Siblings” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Traversing Parents, Children and Siblings”?
Navigate the DOM tree between related nodes. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Traversing Parents, Children and Siblings” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this JavaScript Academy lesson?
Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Selecting Elements with querySelector
- getElementById and getElementsByClassName
- Traversing Parents, Children and Siblings
- NodeList vs HTMLCollection