When we use the querySelectorAll function to select all children of a given element, it fetches all the children, including the nested ones. But what if you only want to retrieve the direct children? That's where the > selector comes in handy.
To make things clearer, here's an example: let's say you want to select all direct children of an element with the ID of parent. You can simply use the following code:
const parentElement = document.getElementById('parent');
const directChildren = parentElement.querySelectorAll('> *');
In the code above, we're using getElementById to select a parent element with a specific id attribute. Then, we use querySelectorAll to choose all direct children of that parent element using the > selector. The * selector matches any element, so this code selects all direct children, no matter their tag name.
If you only want to select a specific type of tag, you can use that tag name instead of the * selector. For example, the following code selects only the li tags that are direct children of a given ul element.
This approach excludes any nested li tags.
const ul = document.getElementById('list');
const directItems = ul.querySelectorAll('> li');
If you found this series helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!
If you want more helpful content like this, feel free to follow me:
Top comments (0)