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)