QuerySelectorで2番目の一致を取得するにはどうすればよいですか？

Question

次のステートメントは、クラスtitanicの最初の要素を示します。

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

同じクラスの2番目の要素を取得するにはどうすればよいですか？

Answer 1

使用する - document.querySelectorAll

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

Answer 2

2番目の要素を選択するためにquerySelectorAllを必ずしも必要とせず、問題はquerySelector AP​​Iを使用することです。 CSSの力をセレクターで活用できます。

たとえば、次のことができます。

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

2番目の要素を選択します。注：カウントは1ではなく0から始まります。