JAVASCRIPT
Traverse and Filter Child Elements
Learn to navigate through an element's child nodes, filter them by tag name or class, and apply modifications. Essential for dynamic content management.
function processChildElements(parentId, filterSelector = '*', callback) {
const parent = document.getElementById(parentId);
if (!parent) {
console.error(`Parent element with ID '${parentId}' not found.`);
return;
}
const children = parent.querySelectorAll(filterSelector);
children.forEach(child => {
if (typeof callback === 'function') {
callback(child);
}
});
}
// Example Usage:
// Assuming <div id="myContainer"><p>Text 1</p><span>Span 1</span><p class="special">Text 2</p></div>
// processChildElements('myContainer', 'p', (pElement) => {
// pElement.style.color = 'blue';
// console.log(`Modified paragraph: ${pElement.textContent}`);
// });
// // To get all immediate children (not descendants)
// function getImmediateChildren(parentId) {
// const parent = document.getElementById(parentId);
// if (!parent) return [];
// return Array.from(parent.children); // HTMLCollection to Array
// }
// const immediateChildren = getImmediateChildren('myContainer');
// console.log(immediateChildren.map(child => child.tagName));
How it works: This snippet provides a function to traverse and process child elements of a given parent. It utilizes `querySelectorAll` to select descendants matching a specific selector and then applies a provided callback function to each found child. This is highly useful for batch modifications or extracting data from structured content. The example also shows how to get immediate children using `element.children`.