How to get the second match with QuerySelector?

Question

The following statement gives me the first element with the class titanic

element = document.querySelector('.titanic');

How would I retrieve the second element with the same class?

Pekoe

developer.mozilla.org/en-US/docs/Web/API/… – Brash

querySelectorAll returns a collection instead of a single element. The results are returned in document order, which is defined as a depth-first ordering. – Michelemichelina

Answer 1

Use document.querySelectorAll

document.querySelectorAll('.titanic')[1]

Brash

This would work. But wouldn't make me able to change it's values directly, just read them. Because it is a static nodelist, instead of a live nodelist. Also, static nodeLists take more time to produce than live nodelists. Is there an alternative? – Pekoe

@NickySmits You can still make changes to the elements found. A static node list just means that it does not change when the document is changed (elements added / removed) – Brash

I tried. But i was not able to change the innerHTML with the static node, while it was possible with a live node. – Pekoe

@NickySmits Then you're doing something else I'm not aware of - jsfiddle.net/ZQZhX – Brash

Holy crap! It does work! Thx bro. I did the exact same thing and it didnt work, but appearantly it was just some random fault. Well, this helps me a great deal. Do you perhaps know any way to make this a live nodelist too? – Pekoe

Answer 2

You don't necessarily need querySelectorAll for picking second element and the question is to use querySelector API. You can utilizing the power of CSS in the selector.

For example you can do:

document.querySelector('.titanic:nth-child(2)')

to pick second element. NOTE: the count starts at 1, not 0.

Refer to this quick CodePen to play around this approach: https://codepen.io/adamchenwei/pen/RwZvQvW?editors=1111

NOTE: It is not accurate to use n-th-child against classes among child elements that have different class names. Plz do not do that. I would suggest to find alternative method (which I am not aware at this time) ref: nth-child doesn't respond to class

a use case example WILL NOT WORK with n-th:child: https://codepen.io/adamchenwei/pen/MWQMObL

Losel

But this will return its child in that order – Hustle

@DipanshuMahla you need to elaborate what you try to convey. – Losel

What I meant was that your code document.querySelector('.titanic:nth-child(2)') will get nth child of class titanic. But What is asked is that we need to get the nth node with the same class, like it is shown in Phil's answer but with document.querySelector() – Hustle

use it whichever suit your need. that's why I said "don't necessarily". you can always use parent node/class instead, but you also need to know how to use css properly as well. Use whichever that suit your use case well. – Losel

let's say you have 4 div with class "titanic" and you want to select the second div with "titanic" class using document.querySelector, and DEFINITELY NOT second child of class "titanic" – Hustle

@DipanshuMahla not sure what you are you referring to as your idea of a "child" element. Please validate your scenario. Because what you said made no sense. Try it yourself. codepen.io/adamchenwei/pen/RwZvQvW?editors=1111 – Losel

This doesn't work: codepen.io/mmakrzem/pen/abVERRK See my pen. I want to get the second 'b' element but the query returns null. – Tyra

@MarekKrzeminski plz look at the demo I attached with the question and use as its intended by read through doc developer.mozilla.org/en-US/docs/Web/CSS/:nth-child – Losel

@MarekKrzeminski also look my updated answer note – Losel