JavaScriptおれおれAdvent Calendar 2013 – 01日目

いよいよ始まりました。初日はこのメソッドから始めましょう。

今時の開発だとまずjQueryを使っていると思うのですが、ちょっとした開発（あるいはデバッグ）でjQueryを導入するのも面倒だなーという時に便利なメソッドです。

document.querySelector()

というわけでこのdocument.querySelector()を使うと、セレクターを使って要素検索をする事が出来ます。

<ul id="list">
    <li class="current"><a href="/home">ホーム</a></li>
    <li><a href="/tags">タグ</a></li>
    <li><a href="/categories">カテゴリー</a></li>
</ul>

var elem = document.querySelector('#list .current>a');

古いやり方だとdocument.getElementsByTagName()なんかで頑張って探す感じですが、最近のブラウザー (IEも8+) であればquerySelector()を使ってセレクターで検索する事が可能です。

複数ならdocument.querySelectorAll()

querySelector()はセレクターに合致する最初の要素を返しますが、複数欲しいときはdocument.querySelectorAll()を使います。こちらは要素を配列風のオブジェクトで返します。

<ul id="list">
    <li class="current"><a href="/home">ホーム</a></li>
    <li><a href="/tags">タグ</a></li>
    <li><a href="/categories">カテゴリー</a></li>
</ul>

var elems = document.querySelectorAll('#list li>a');
for (var i=0, l=elems.length; i<l; i++) {
    var elem = elems[i];
}

配列風なのでfor文でぐるぐる回して処理する事が出来ます。

配列？　コレクション？

ただ配列ではないので、forEach()なんかは使う事が出来ません。

またdocument.getElementsByTagName()等はリアルタイムに内容が更新される（戻り値を持ったまま文書ツリーから要素を追加、削除すると、先の戻り値にも反映される）のですが、document.querySelectorAll()の場合はそうはならない（その時点での要素の一覧のまま）という点も異なります。

要素内の検索にも使える

querySelector()もquerySelectorAll()も、documentだけでなく、各要素内からの検索に利用する事も出来ます。

<ul id="list">
    <li class="current"><a href="/home">ホーム</a></li>
    <li><a href="/tags">タグ</a></li>
    <li><a href="/categories">カテゴリー</a></li>
</ul>

var elList = document.querySelector('#list');
var elCurItem = elList.querySelector('.current');

取ってきた要素の使い方

なおjQueryと同じようなやり方で要素を検索する事は出来ましたが、jQueryと同じようなやり方で要素を操作する事は出来ません。

残念。

参考