※スマホ対応はしてません。

タグ: .querySelectorAll()

querySelector()を使うとjQueryみたいにセレクターで要素を取得できるよ。(DOMおれおれAdvent Calendar 2015 – 02日目)

カテゴリー: JavaScript

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かなって思ってるんだけど、具体的な経緯とかは調べてないです。ご存知の方、お教えくださいまし。

参考

jQueryが使えない状況でもjQueryみたいにして要素を検索するquerySelector()が便利。 (JavaScriptおれおれAdvent Calendar 2013 – 01日目)

カテゴリー: JavaScript

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

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

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

document.querySelector()

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

(さらに…)

jQueryが要素検索に使うSizzleについて。

カテゴリー: JavaScript

jQueryの強力な機能のひとつに、 $('#the-target') のようにCSSのセレクターを用いて要素検索できるというものがあります。この要素検索を行うモジュールにはSizzleという名前が付けられています。

一方、近代的なブラウザーには .querySelectorAll() がネイティブで実装されています。こちらもCSSのセレクターで要素検索できるメソッドです。

var $elems = $('elem#id.class, .and.more.selectors');
var elems = document.querySelectorAll('elem#id.class, .and.more.selectors');

JavaScriptで何かするよりも、ネイティブでやった方が高速です。じゃあSizzleなんていらないんじゃないの?と思われるかもしれません。実際、jQuery互換軽量フレームワークを詠うZepto.jsでは、ほとんどそのまま querySelectorAll() を利用しています。(そのために古いIEでは正常に動作しませんが。)

それでもjQueryはSizzleを使い続ける方針です。Sizzleが .querySelectorAll() に勝る点とは、何でしょうか。

参考