DOMおれおれAdvent Calendar 2015 – 02日目

2015-12-02

ちょっとだけ要素を操作したくてそれだけのためにjQuery読み込むのもちょっとアレよね、みたいなときに便利なやつです。

こんな具合です。

var el = document.querySelector('body #foo ul.bar:first-child > li');

document だけじゃなくて各要素でも使えるので、jQueryの .find() みたいな使い方もできます。

var elBlock = document.querySelector('body #foo');
var el = elBlock.querySelector('ul.bar:first-child > li');

ただしあくまでセレクターを指定するので、 “>” で始まるやつは駄目です、エラーになります。（jQueryはできる。）

var elList = document.querySelector('body #foo ul.bar:first-child');
var el = elBlock.querySelector('> li');  // An invalid or illegal string was specified

複数探す場合

querySelector() はセレクターに合致した最初の要素ひとつを返します。複数の要素が必要な場合は querySelectorAll() を使います。

var els = document.querySelectorAll('body #foo ul.bar:first-child > li');
for (var i=0, l=els.length; i<l; i++) {
  var el = els[i];
  console.log(el);
}

これも document でも各要素でも使えます。

戻り値はNodeListという配列風オブジェクトです。 forEach() は持っていません。使いたければ配列の方を呼び出して使う感じ。

var els = document.querySelectorAll('body #foo ul.bar:first-child > li');
Array.prototype.forEach.call(els, function(el, index) {
  console.log(el);
});

その他

IEも8から対応しているので、割と気軽に使えるかと思います。

単純にひとつのクラス名やIDで検索する場合には、また別のAPIを使う事もできます。そっちの方が高速なんだけど、こっちので統一して書くって方針でもいいんじゃないかな。そもそもそんなに書かないでしょ。

jQueryの影響を受けて策定されたAPIかなって思ってるんだけど、具体的な経緯とかは調べてないです。ご存知の方、お教えくださいまし。

参考