【Javascript】CSSセレクタとマッチする要素を取得する。

めも。

document.querySelector()メソッドを用いる。

例えば下記のようなHTML要素を取得したい場合。

<div class="target">Click</div>
<span id="target">Click</span>

下記の通り、CSSと同様のセレクタを渡すことで要素を選択してくれる。

var div = document.querySelector('.target');
var span = document.querySelector('#target');
console.log(div, span);

document.querySelector()は同一の要素が複数ある場合、最初にマッチした要素のみを返却する。
そのため下記のように一致する要素全てを取得したい場合はdocument.querySelectorAll()を用いるとよい。

■HTML

<div class="target">Click1</div>
<div class="target">Click2</div>
<div class="target">Click3</div>
<div class="target">Click4</div>
<div class="target">Click5</div>
<div class="target">Click6</div>

■Javascript

var divs = document.querySelectorAll('.target');
console.log(divs);