Get the nth child of an Element using JavaScript

avatar

Borislav Hadzhiev

2 min

banner

Photo from Unsplash

# Table of Contents

  1. Get the nth child of an Element using JavaScript
  2. Get the nth child of an Element using NodeList.item
  3. Get every nth child of an Element using querySelectorAll

# Get the nth child of an Element using JavaScript

Use the querySelector() method to get the nth child of an element.

The :nth-child pseudo-class returns the element that matches the provided position.

Here is the HTML for the examples.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>bobbyhadz.com</title> </head> <body> <div id="parent"> <div class="child1">Child 1</div> <div class="child2">Child 2</div> <div class="child3">Child 3</div> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const third = document.querySelector('#parent :nth-child(3)'); console.log(third); // ๐Ÿ‘‰๏ธ div.child3 const odd = document.querySelectorAll('#parent :nth-child(odd)'); console.log(odd); // ๐Ÿ‘‰๏ธ [div.child1, div.child3]

The first example uses the document.querySelector() method and the :nth-child() pseudo-class to select the third child of an element with an id of parent.

The :nth-child() pseudo-class takes a single argument that describes which elements should be matched.

Note that element indices are 1-based when using :nth-child().

You can narrow things down by only matching an element of a specific type, e.g. the second positioned div element.

index.js
const second = document.querySelector('#parent div:nth-child(2)'); console.log(second); // ๐Ÿ‘‰๏ธ div.child3

This selector would only match the second div element in the group of siblings.

# Get the nth child of an Element using NodeList.item

An alternative approach is to get a NodeList containing the children and use the NodeList.item method to get a node from the list by index.

index.js
const children = document.getElementById('parent').children; console.log(children); // ๐Ÿ‘‰๏ธ [div.child1, div.child2, div.child3] const firstChild = children.item(0); console.log(firstChild); // ๐Ÿ‘‰๏ธ div.child1

We accessed the children property on the parent and got a NodeList containing the children of the element.

This allows us to use the item() method, to which we can pass the zero-based index of the element we want to select.

The item() method returns a node from a NodeList by index. If the index is out of range, a null value is returned.

Using the item method is more intuitive, however, the :nth-child() pseudo-class takes different keyword values, which makes it more flexible:

  • odd - matches the siblings whose numeric position is odd - 1, 3, 5, etc.
  • even - matches the siblings whose numeric position is even - 2, 4, 6, etc.
  • 3n - matches elements in position 3, 6, 9, 12, etc.

# Get every nth child of an Element using querySelectorAll

The following examples use document.querySelectorAll to select multiple elements using the :nth-child() pseudo-class.

index.js
const even = document.querySelectorAll('#parent :nth-child(even)'); console.log(even); // ๐Ÿ‘‰๏ธ [div.child2] const odd = document.querySelectorAll('#parent :nth-child(odd)'); console.log(odd); // ๐Ÿ‘‰๏ธ [div.child1, div.child3] const every2 = document.querySelectorAll('#parent :nth-child(2n)'); console.log(every2); // ๐Ÿ‘‰๏ธ [div.child2]

The third example selects every 2 elements, e.g. elements in positions 2, 4, 6, etc.

Note that indexes are 1-based when using :nth-child() and zero-based when using the item() method.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev