めも。
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);