Traversing Down the DOM Tree
When working with the DOM, you’ll often need to move downward from a
selected element to access its children or nested elements. jQuery provides
two key methods for this:
- children() – Selects only the direct child elements.
- find() – Selects all descendant elements at any depth.
jQuery children() Method
The children() method returns all direct children of the selected element.
It moves just one level down in the DOM hierarchy and ignores deeper nested
descendants.
Example: Get Direct Children
The following example selects all elements that are immediate children of
each <div>:
<!DOCTYPE html>
<html>
<head>
<title>jQuery children() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="div1">
<p>Paragraph 1 inside div</p>
<p>Paragraph 2 inside div</p>
<section>
<span>Span inside section</span>
</section>
</div>
<button>Show Children of Div</button>
<script>
$(document).ready(function(){
$("button").click(function(){
var childrenTags = $("#div1").children().map(function(){
return this.tagName; // Get tag names of all children
}).get().join(", ");
alert("Direct children of div: " + childrenTags);
});
});
</script>
</body>
</html>
Example: Filter Children by Selector
You can also pass a selector to children() to filter the results.
The example below returns only <p> elements with the class "first"
that are direct children of a <div>:
<!DOCTYPE html>
<html>
<head>
<title>jQuery children(selector) Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="div1">
<p class="first">Paragraph 1 (first class)</p>
<p>Paragraph 2</p>
<section>
<p class="first">Paragraph inside section</p>
</section>
</div>
<button>Show Children with Class "first"</button>
<script>
$(document).ready(function(){
$("button").click(function(){
var childrenTags = $("#div1").children("p.first").map(function(){
return this.tagName + ' (' + $(this).text() + ')'; // Tag name + text
}).get().join(", ");
alert("Direct children of div with class 'first': " + childrenTags);
});
});
</script>
</body>
</html>
This method is perfect for targeting specific child elements without
affecting deeper nested content.
jQuery find() Method
The find() method is used to search for all descendant elements of a
selected element, no matter how deeply nested they are in the DOM
tree.
Unlike children(), which only returns direct children, find() searches
through all levels of descendants.
Example: Find Specific Descendants
The following code selects all <span> elements that are descendants
of any <div>:
<!DOCTYPE html>
<html>
<head>
<title>jQuery find() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="div1">
<p>Paragraph 1 <span>Span inside paragraph</span></p>
<section>
<span>Span inside section</span>
</section>
</div>
<button>Find All Spans Inside Div</button>
<script>
$(document).ready(function(){
$("button").click(function(){
var spans = $("#div1").find("span").map(function(){
return $(this).text(); // Get text of each span
}).get().join(", ");
alert("Spans inside div: " + spans);
});
});
</script>
</body>
</html>
Example: Find All Descendants
You can also use the universal selector (*) to return all descendant
elements of a <div>:
<!DOCTYPE html>
<html>
<head>
<title>jQuery find("*") Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="div1">
<p>Paragraph 1 <span>Span inside paragraph</span></p>
<section>
<span>Span inside section</span>
<p>Another paragraph</p>
</section>
</div>
<button>Find All Descendants Inside Div</button>
<script>
$(document).ready(function(){
$("button").click(function(){
var allDescendants = $("#div1").find("*").map(function(){
return this.tagName; // Get the tag names of all descendants
}).get().join(", ");
alert("All descendants of div: " + allDescendants);
});
});
</script>
</body>
</html>
This method is especially useful when you need to apply actions or styles
to deeply nested elements within a container.
More topic in jQuery
