43

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?

BoltClock
  • 665,005
  • 155
  • 1,345
  • 1,328
Nicky Smits
  • 2,704
  • 3
  • 19
  • 26
  • https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll – Phil Apr 07 '14 at 02:01
  • 1
    `querySelectorAll` returns a collection instead of a single element. The results are returned in document order, which is defined as a depth-first ordering. – cookie monster Apr 07 '14 at 02:02

2 Answers2

69

Use document.querySelectorAll

document.querySelectorAll('.titanic')[1]
Phil
  • 141,914
  • 21
  • 225
  • 223
  • 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? – Nicky Smits Apr 07 '14 at 02:09
  • 1
    @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) – Phil Apr 07 '14 at 02:10
  • I tried. But i was not able to change the innerHTML with the static node, while it was possible with a live node. – Nicky Smits Apr 07 '14 at 02:13
  • 1
    @NickySmits Then you're doing something else I'm not aware of - http://jsfiddle.net/ZQZhX/ – Phil Apr 07 '14 at 02:16
  • 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? – Nicky Smits Apr 07 '14 at 02:22
34

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

Ezeewei
  • 7,162
  • 11
  • 57
  • 110
  • 2
    But this will return its child in that order – Dipanshu Mahla Nov 15 '21 at 13:52
  • @DipanshuMahla you need to elaborate what you try to convey. – Ezeewei Nov 15 '21 at 18:42
  • 2
    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() – Dipanshu Mahla Nov 15 '21 at 18:58
  • 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. – Ezeewei Nov 15 '21 at 19:24
  • 2
    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" – Dipanshu Mahla Nov 17 '21 at 18:02
  • @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. https://codepen.io/adamchenwei/pen/RwZvQvW?editors=1111 – Ezeewei Nov 18 '21 at 14:31
  • This doesn't work: https://codepen.io/mmakrzem/pen/abVERRK See my pen. I want to get the second 'b' element but the query returns null. – Marek Krzeminski Feb 17 '22 at 21:57
  • @MarekKrzeminski plz look at the demo I attached with the question and use as its intended by read through doc https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child – Ezeewei Feb 20 '22 at 01:16