要旨
一部のブラウザでは、 $$() と document.querySelectorAll() で値の型が異なるため等価ではない。値の型は前者が Array 型、後者が NodeList 型になる。
調べようとした動機
$$() と document.querySelectorAll() は同じような感じで使用でき、それらがエイリアスのようだと言われるが、本当にそうなのかと Firefox で軽く調べたら両者で値の型が違うことが分かったので、他のブラウザも含めて調べることにした。
技術文書に記述されている $$() と document.querySelectorAll() の関係
技術文書で、$$() と document.querySelectorAll() の関係部分を引用すると以下のようになった。
MSDN Using the Console to view errors and debug
$$() is a shorthand for document.querySelectorAll().
The command line interpreter - Firefox Developer Tools | MDN
Looks up a CSS selector string, returning a list of DOM nodes that match. This is a shortcut for document.querySelectorAll().
From Firefox 41, this method is no longer a shortcut for document.querySelectorAll() and instead returns an array of elements.
Safari Developer Library The Console
Shorthand for document.querySelectorAll.
Command Line API Reference | Web Tools - Google Developers
$$(selector) returns an array of elements that match the given CSS selector. This command is equivalent to calling document.querySelectorAll().
The following example uses $$() to create an array of all
elements in the current document and displays the value of each element’s src property:
Console | Documentation | Opera Dragonfly – Opera's built-in web developer tools
A shortcut for document.querySelectorAll(), returns a NodeList
大体の文書で、 $$() と document.querySelectorAll() はショートカットとなる関係と書かれる中、MDNとGoogle Developersは、要素の配列が返されると書いてあった。MDNに関してはFirefox 41 から $$() は document.querySelectorAll() のショートカットではなくなったと書いてあった。
調査対象ブラウザ
ブラウザ単体でデバッグコンソールを開け、$$() をサポートしているデスクトップ向けブラウザのみを対象とした。（スマートフォン向けのブラウザはデバッグコンソールを開けなかったり、デスクトップのブラウザでデバッグを行う際にデスクトップ向けのブラウザの実装に依存すると考えられるので除外）
- Microsoft系
- Internet Explorer 11
- Microsoft Edge 20.10240.16384.0
- Firefox系
- Firefox 41.0.2
- Firefox Developer Edition 43.0a2 (2015-10-21)
- Google Chrome系
- Google Chrome 46.0
- Chromium 47.0.2526.16 (64bit)
- Google Chrome Canary 48.0.2542.0 canary (64bit)
- Safari系
- Safari 9.0
- Opera系
- Opera 12.16
- Opera 32.0.1948.69
- Opera Beta 33.0.1990.35
- Opera Developer 34.0.2023.0
調査方法
デバッグコンソール内で、 $$('body').__proto__ を実行し、返ってくる値のメソッドを見て判断。
各ブラウザの結果 (2015-10-23現在)
| ブラウザ |
$$('body').__proto__ のメソッド |
document.querySelectorAll('body').__proto__ のメソッド |
|---|---|---|
| Internet Explorer 11 | NodeList | NodeList |
| Microsoft Edge | NodeList | NodeList |
| Firefox 39.0 | NodeList | NodeList |
| Firefox 41.0.2 | Array | NodeList |
| Firefox 43.0a2 | Array | NodeList |
| Google Chrome 46.0 | Array | NodeList |
| Chromium 47.0 | Array | NodeList |
| Google Chrome Canary 48.0 | Array | NodeList |
| Safari 9.0 | NodeList | NodeList |
| Opera 12.16 | NodeList | NodeList |
| Opera 32.0 | NodeList | NodeList |
| Opera 33.0 | Array | NodeList |
| Opera 34.0 | Array | NodeList |
まとめ
- ブラウザによって、
$$()とdocument.querySelectorAll()で返ってくるの値の型はバラバラ - デバッグコードを使いまわすと型が異なることによりエラーが出る可能性がある
- 新しいブラウザでは、
$$()の値の型が NodeList から Array に変更されることがある - “This command is equivalent to calling document.querySelectorAll().” とは
- もしかして、これのこと？