Introduction to DOM Traversing
In this page:
What Is Traversing?
Once you've selected one element, traversal methods let you step to its parents, children, or siblings instead of writing a brand-new selector. This is often simpler and more reliable than trying to describe a related element's position from scratch with CSS selector syntax.
Example: What Is Traversing?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><p>Child paragraph</p></div>
<script>
console.log($("#box").children().length);
</script>
</body>
</html>Using find()
Use find() when you want matching elements deeper inside a selected element, searching through all of its descendants regardless of nesting depth. It works like running a fresh selector, but scoped to only search within the elements you've already selected.
Example: Using find()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><ul><li>Item</li></ul></div>
<script>
console.log($("#box").find("li").length);
</script>
</body>
</html>Using first() and last()
first() and last() narrow a selection down to just its first or last matched element, which is useful after a broader selection like find() or filter() returns several results. Both return a new jQuery object containing at most one element.
Example: Using first() and last()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>One</li><li>Two</li><li>Three</li></ul>
<script>
console.log($("#list li").first().text(), $("#list li").last().text());
</script>
</body>
</html>Chaining Traversal
Traversal methods can be chained together -- for example, finding a container, then its children, then filtering those -- building up a precise selection step by step. This keeps code short by avoiding separate selector strings for every intermediate step.
Example: Chaining Traversal
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><ul><li class="active">One</li><li>Two</li></ul></div>
<script>
console.log($("#box").find("li").filter(".active").text());
</script>
</body>
</html>Practical Traversing
DOM traversal is especially useful when elements are related structurally but don't have unique IDs or classes to select directly, such as finding 'the button next to whichever input triggered an event'. It lets your code follow the actual DOM relationships instead of hardcoding selectors.
Example: Practical Traversing
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="row"><input id="field"><button>Next</button></div>
<script>
$("#field").closest(".row").find("button").on("click", function() {
console.log("Next clicked");
});
</script>
</body>
</html>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: