querySelectorAll并选择特定的子代

Question

Assume I have the HTML below

HTML

<div class="container">
  <p>Test1</p>
  <p>Test5</p>
</div>

<div class="container">
  <p>Test3</p>
  <p>Test7</p>
</div>

I want to select the 2nd child in each .container via vanilla javascript (Test5 and Test 7).

How would I do that?

If I do this

var container = document.querySelectorAll(".container p");
console.log(container[1]);

It only returns Test5 rather than the second child in both containers

Any suggestions? Thanks!

Answer 1

Use the :nth-child selector:

 var secondChilds = document.querySelectorAll(".container p:nth-child(2)"); console.log(secondChilds); 

 <div class="container"> <p>Test1</p> <p>Test5</p> </div> <div class="container"> <p>Test3</p> <p>Test7</p> </div> 

Answer 2

Another approach using ES6. Maybe a lil' bit overcomplicated - but works fine.

 let elems = document.getElementsByClassName('container'); Array.from(elems).forEach(function(v){ v.children[1].style.color = 'blue'; }) 

 <div class="container"> <p>Test1</p> <p>Test5</p> </div> <div class="container"> <p>Test3</p> <p>Test7</p> </div>