javascript - css nth-child nth-last-of-type with javascript – jquery なし

Question

nth-child() と nth-last-of-type() に純粋な javascript だけで (jquery なしで) アピールする可能性はありますか? 私はjqueryの使用を大幅に避けたいと思っています。

Answer 1

document.querySelectorAllを使用します。

例えば

var elements = document.querySelectorAll('div:nth-child(5)');

---

document.querySelectorAll

概要

指定されたセレクターのグループに一致するドキュメント内の要素のリストを返します (ドキュメントのノードの深さ優先事前順トラバーサルを使用)。返されるオブジェクトは NodeList です。

構文

elementList = document.querySelectorAll(selectors);

どこ

elementListは、要素オブジェクトの非ライブ NodeList です。

selectorsは、コンマで区切られた 1 つ以上の CSS セレクターを含む文字列です。

返される NodeList には、指定されたセレクターのいずれかに一致するドキュメント内のすべての要素が含まれます。セレクター文字列に CSS 疑似要素が含まれている場合、返される elementList は空になります。