如何 select 所有与 baseElement 相关的子项（特定类型）？

Question

Let's say my code looks like that

 const menu = document.querySelector(".menu"); //now i need to select <a> tags with 'design' and 'development', but using menu element i've already selected. //const firstLineChilds = menu.querySelector(???);

 <ul class="menu"> <li><a href="#">Design</a></li> <li><a href="#">Development</a></li> <li> <ul class="sub-menu"> <li><a href="#">DevOps</a></li> <li><a href="#">Managment</a></li> </ul> </li> </ul>

Is it even possible to to this the 'clean way'? Or i just need to use menu.parentNode.querySelector(".menu > li > a")

Answer 1

You can chain querySelector and other such methods and it will search children of previous returned node: document.querySelector(".menu").querySelectorAll("a") or menu.querySelectorAll("a")

Answer 2

Converting the hrefs to an Array (in the snippet the spread syntax is used for that) enables you to filter them:

 const relevantHrefs = [...document.querySelectorAll(".menu li a")].filter(href => ["Design", "Development"].find(h => href.textContent === h)); console.log(relevantHrefs); // based on comment, this is maybe what OP needs const menu = [...document.querySelectorAll(".menu > li:nth-child(-n+2) a")]; console.log(menu);

 <ul class="menu"> <li><a href="#">Design</a></li> <li><a href="#">Development</a></li> <li> <ul class="sub-menu"> <li><a href="#">DevOps</a></li> <li><a href="#">Managment</a></li> </ul> </li> </ul>

Answer 3

Yes, you can use :scope in conjunction with child combinators, in menu.querySelectorAll() :

 const menu = document.querySelector(".menu") const firstLineChilds = menu.querySelectorAll(":scope > li > a"); console.log(firstLineChilds);

 <ul class="menu"> <li><a href="#">Design</a></li> <li><a href="#">Development</a></li> <li> <ul class="sub-menu"> <li><a href="#">DevOps</a></li> <li><a href="#">Managment</a></li> </ul> </li> </ul>

If you use descendant combinators, you'll still get the nested a elements, which is not what you want. See What does the ">" (greater-than sign) CSS selector mean?