How to get the second match with QuerySelector?

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

Use document.querySelectorAll

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