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. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.
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.
Learn JavaScript with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 59
- Lessons
- 200
Frequently Asked Questions
Is the “Traversing Parents, Children and Siblings” lesson free?
Yes — any 3 lessons of the JavaScript Academy learning path, including “Traversing Parents, Children and Siblings”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
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