Archives by date

You are browsing the site archives by date.

【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);

 

【Javascript】キャプチャリングとバブリングの違い。

DOMのイベントには、キャプチャリングフェーズとバブリングフェーズという二つのフェーズが存在しており、addEventListenerの第三引数にて指定することが出来る。trueを渡すと、キャプチャリングフェーズ、falseを渡すとバブリングフェーズで実行される。デフォルトはバブリングフェーズで実行される。

■実行順
キャプチャリングフェーズ => バブリングフェーズ

■キャプチャリングフェーズ
DOMの外側からイベントが発生した要素に向かってイベントが伝わる。

■バブリングフェーズ
イベントが発生した要素から外側に向かってイベントが伝わる。

 

挙動に関しては要実験。