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

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

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

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

参考(https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector)

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

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

参考(https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll)