如何使用查询选择器在另一个特定 div 内的 select 特定元素？

Question

code is like this

<div class="linkPillar">
  <a href="github"><img src="github.png" alt="GitHub"></a>
  <a href="facebook"><img src="fb.png" alt="facebook"></a>
</div>

and i want to select all a's just inside of linkPillar without giving each of them an id. is there any way to make this, thanks

Answer 1

You can use the query selector to find the elements:

 console.log(document.querySelectorAll('.linkPillar a'));

 <div class="linkPillar"> <a href="github"><img src="github.png" alt="GitHub"></a> <a href="facebook"><img src="fb.png" alt="facebook"></a> </div>

Answer 2

You can use getElementsByClassName() method to return a collection of all elements in the document with the class name "linkPillar" and then use querySelectorAll to fetch all of the a tag elements within that element.

 var aTags = document.getElementsByClassName("linkPillar")[0].querySelectorAll("a"); console.log(aTags);

 <div class="linkPillar"> <a href="github"><img src="github.png" alt="GitHub"></a> <a href="facebook"><img src="fb.png" alt="facebook"></a> </div>