標準JSだけでクエリセレクターを使用して要素を取得

2019年08月09日 16:04:50

2019年09月27日 12:09:10

標準JSだけでクエリセレクターを使用して要素を取得するにはDocument.querySelector()メソッドを利用すれば良い。

var el = document.querySelector("div.user-panel.main input[name='login']");

このメソッドはセレクターが一致するようそのうち先頭の要素のみを返すことに注意。逆にDocument.getElementsByClassName()を使用したときのようにわざわざ[0]等として先頭の要素を取得する必要はない。

セレクターが一致した要素全てを取得する場合は、Document.querySelectorAll()メソッドを利用すれば良い。

var matches = document.querySelectorAll("p");