Selector API の使い方をメモっとく
Selector API は CSS のセレクタ( #ok_button とか .button_area )を使用して、HTMLの要素を取得できるAPI。 以下のメソッドがある。
・document.querySelector
例
document.querySelector('.test'); // class属性に test が指定されている要素のうち最初の要素を指定する
・document.querySelectorAll
例
document.querySelectorAll('.test'); // class属性に test が指定されている要素すべてを配列で返す
今までは document.getElementById() とか document.getElementsByClassName() とか をセレクタ別で使い分けていて、それが嫌な場合は大抵jQueryを使っていたけど、 jQueryを使うまでもなく、でもいちいちメソッド使い分けるのめんどーだなーって時使えるかもしれない。 あと、CSSに慣れているデザイナと相性いいかもしれない。
実際のソースコードものせとく
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Query Selector テスト</title> </head> <body> <p> <button id="button1">querySlectorメソッド使用ボタン</button> <button id="button2">querySlectorAllメソッド使用ボタン</button> </p> <ul> <li class="test_class">変更前</li> <li class="test_class">変更前</li> <li class="test_class">変更前</li> <li class="test_class">変更前</li> <li class="test_class">変更前</li> </ul> </body> <script> // querySelector() メソッドを使用してイベントリスナを設定 document.querySelector('#button1').addEventListener('click', function () { // querySelectorはセレクタで取得できる要素のなかで最初の要素を返す document.querySelector('.test_class').innerHTML = '変更された'; }, false); // querySelector() メソッドを使用してイベントリスナを設定 document.querySelector('#button2').addEventListener('click', function () { var nodeList , i ; // querySelectorAll() は querySelector()と異なり、セレクタで取得できる要素すべてを配列で返す nodeList = document.querySelectorAll('.test_class'); for (i = 0; i < nodeList.length; i++) { nodeList[i].innerHTML = '変更された'; }; }, false); </script> </html>