うごく生ゴミプログラマの備忘録

うごく生ゴミ 〜再臨〜

Selector API の使い方

Selector API の使い方をメモっとく

Selector APICSSセレクタ( #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>