Traversing the DOM tree is a fundamental aspect of web development, allowing developers to navigate through the hierarchical structure of HTML documents and target specific elements for manipulation. jQuery simplifies DOM traversal by providing a wide range of traversal methods that enable efficient selection and manipulation of DOM elements based on their relationship to other elements.
Introduction to DOM Traversal with jQuery:
DOM traversal involves moving up, down, and sideways through the DOM tree to find and interact with elements. jQuery offers several methods for traversal, including parent, child, sibling, and filtering methods, which make it easier to locate elements based on their relationship to other elements.
Traversing Up the DOM Tree:
Parent Elements:
The parent() method in jQuery selects the direct parent element of the matched element.
<script>
$(document).ready(function() {
// Select the parent element of all <span> elements
$("span").parent().css("border", "1px solid red");
});
</script>
In this example, $("span").parent() selects the parent element of all <span> elements and adds a red border to them.
Ancestors:
The parents() method selects all ancestor elements, traversing up the DOM tree.
<script>
$(document).ready(function() {
// Select all ancestor elements of all <span> elements
$("span").parents().css("background-color", "lightblue");
});
</script>
This jQuery code selects all ancestor elements of <span> elements and sets their background color to light blue.
Traversing Down the DOM Tree:
Child Elements:
The children() method selects all direct child elements of the matched element.
<script>
$(document).ready(function() {
// Select all direct child elements of <ul> elements
$("ul").children().css("font-weight", "bold");
});
</script>
In this example, $("ul").children() selects all direct child elements of <ul> elements and sets their font weight to bold.
Descendant Elements:
The find() method selects all descendant elements of the matched element.
<script>
$(document).ready(function() {
// Select all descendant elements with the class "highlight"
$("div").find(".highlight").css("color", "red");
});
</script>
This jQuery code selects all descendant elements with the class "highlight" within <div> elements and changes their color to red.
Traversing Sideways in the DOM Tree:
Sibling Elements:
The siblings() method selects all sibling elements of the matched element.
<script>
$(document).ready(function() {
// Select all sibling elements of <li> elements
$("li").siblings().addClass("highlight");
});
</script>
In this example, $("li").siblings() selects all sibling elements of <li> elements and adds the class "highlight" to them.
Next and Previous Elements:
The next() and prev() methods select the next and previous sibling elements, respectively.
<script>
$(document).ready(function() {
// Select the next sibling element of all <h2> elements
$("h2").next().css("font-style", "italic");
});
</script>
This jQuery code selects the next sibling element of all <h2> elements and sets its font style to italic.
Filtering Methods:
Filtering by Selector:
The filter() method allows filtering of matched elements based on a specified selector.
<script>
$(document).ready(function() {
// Select all <li> elements with an even index
$("li").filter(":even").css("background-color", "lightgray");
});
</script>
In this example, $("li").filter(":even") selects all <li> elements with an even index and sets their background color to light gray.
Filtering by Function:
The filter() method can also accept a function as an argument for custom filtering.
<script>
$(document).ready(function() {
// Select all <div> elements with a height greater than 100 pixels
$("div").filter(function() {
return $(this).height() > 100;
}).css("border", "2px solid blue");
});
</script>
<div> elements with a height greater than 100 pixels and adds a blue border to them. Practice Excercise Practice now