DOM 获取元素方法

Question

<div class="box">
    First collection
</div>

<div class="box">
    Second collection
</div>

Hi, I'm still studying the JS, I have this exercise that requires me to select the second 'box' class and store it into a variable, I just don't know how to do it, can someone help me, thank you.

I have tried using document.GetElementsByClassName and document.querySelector but I just don't know how to pick the second one and store it to a variable.

Answer 1

Both can be used:

.getElementsByClassName('box')[1]

 var selected = document.getElementsByClassName("box")[1]; console.log(selected);

 <div class="box"> First collection </div> <div class="box"> Second collection </div>

.querySelector('.box:nth-of-type(2)')

 var selected = document.querySelector('.box:nth-of-type(2)'); console.log(selected);

 <div class="box"> First collection </div> <div class="box"> Second collection </div>

Answer 2

you can do it by using .getElementByClassName then it should return a list of item with the class name box in Array, then you can just simply select which boxes you want.

const boxes =  document.getElementsByClassName("box")

boxes[0]
boxes[1]
boxes[boxes.length]