Sometimes, we want to get an element’s nth-child element in JavaScript.
In this article, we’ll look at how to get an element’s nth-child element in JavaScript.
How to get an element’s nth-child element in JavaScript?
To get an element’s nth-child element in JavaScript, we can use querySelector.
For instance, we write:
<section class="hardware">some text, nth-child is one</section>
<section class="hardware">some text, nth-child is two</section>
<section class="hardware">some text, nth-child is three</section>
<section class="hardware">some text, nth-child is four</section>
<section class="hardware">some text, nth-child is five</section>
to add 5 section elements.
Then we get the 2nd section element by writing:
const child = document.querySelector('.hardware:nth-child(2)')
console.log(child)
We call document.querySelector with '.hardware:nth-child(2)' to get the 2nd section element with class hardware.
Therefore, child is <section class="hardware">some text, nth-child is two</section>.
Conclusion
To get an element’s nth-child element in JavaScript, we can use querySelector.
