JAVASCRIPT
Filter Child Elements by Selector or Tag Name
Learn to efficiently select and filter specific child elements within a parent container using JavaScript's powerful DOM traversal methods like `children` and `querySelectorAll`.
function getFilteredChildren(parentId, selector = '*') {
const parent = document.getElementById(parentId);
if (!parent) {
console.error(`Parent element with ID '${parentId}' not found.`);
return [];
}
return Array.from(parent.querySelectorAll(`:scope > ${selector}`));
// Alternative for direct children check (less flexible with complex selectors):
// return Array.from(parent.children).filter(child => child.matches(selector));
}
// Example Usage:
// Assume HTML:
// <div id="myContainer">
// <p class="text-item">First paragraph</p>
// <div>Another div</div>
// <span class="text-item">A span</span>
// <p>Second paragraph</p>
// </div>
// const paragraphs = getFilteredChildren('myContainer', 'p'); // Gets all <p> children
// const textItems = getFilteredChildren('myContainer', '.text-item'); // Gets elements with class 'text-item'
How it works: This JavaScript snippet provides a utility function to retrieve direct child elements of a specified parent, optionally filtered by a CSS selector. It leverages `querySelectorAll` with the `:scope` pseudo-class to ensure only immediate children matching the selector are returned, making it versatile for targeted DOM queries and component-based filtering.