querySelectorメソッド

JavaScriptでノードを取得するメソッドには次のものがある。

  • getElementsById
  • getElementsByTagName
  • getElementsByClassName
  • getElementsByName

上記のメソッド以外にquerySelectorメソッドが存在することを知ったので、忘れないために記録しておく。上記４つのメソッドを一つにしたようなメソッドである。

// 以下の二つは同じ要素を取得する
var nl00 = document.getElementsByTagName('div');
var nl01 = document.querySelectorAll('div');

alert(nl00[0] == nl01[0]); // true
alert(nl00[1] == nl01[1]); // true
  :
  :
<div id="result"></div>

-------------------------------------------------------------------------
// 以下の二つは同じ要素を取得する・・・ID
var elm00 = document.getElementById('target');
var elm01 = document.querySelector('#target');

alert(elm00 == elm01); // true
 :
 :

<a href="http://www.wings.msn.to/" id="target">サーバサイド技術の学び舎 -WINGS</a><br>
<a href="http://www.web-deli.com/" id="target">WebDeli</a><br>

-------------------------------------------------------------------------
// 以下の二つは同じ要素を取得する・・・class
var elm00 = document.getElementsClassName('my');
var elm01 = document.querySelector('.my');

alert(elm00 == elm01); // true

<a href="http://www.wings.msn.to/" class="my">サーバサイド技術の学び舎 -WINGS</a><br>
<a href="http://www.web-deli.com/" class="my">WebDeli</a><br>

------------------------------------------------------------------------
// 以下の二つは同じ要素を取得する
var nl02 = document.getElementsByName('hoge');
var nl03 = document.querySelectorAll('*[name="hoge"]');

alert(nl02[0] == nl03[0]); // true
alert(nl02[1] == nl03[1]); // true
  :
  :
<a href="http://www.wings.msn.to/" name="hoge">サーバサイド技術の学び舎 -WINGS</a><br>
<a href="http://www.web-deli.com/" name="hoge">WebDeli</a><br>