さまざまなブラウザでの querySelector と querySelectorAll の実装の違いの分析_jquery

モジュール dom {
[補足, NoInterfaceObject]
インターフェース NodeSelector {
要素 querySelector(DOMString セレクター内)
NodeList querySelectorAll(DOMString セレクター内); ;
Document は NodeSelector を実装します。
DocumentFragment は NodeSelector を実装します。つまり、これら 3 種類の要素にはすべて 2 つのメソッドがあります。 querySelector および querySelectorAll のパラメータは、
css selector
に準拠した文字列である必要があります。違いは、querySelector はオブジェクトを返し、querySelectorAll はコレクション (NodeList) を返すことです。

現在、IE8/9 および Firefox/Chrome/Safari/Opera の最新バージョンでは既にサポートされています。
ページ上のクラス属性が「red」である要素を取得したい場合は、document.getElementsByClassName('red') を使用するほかに、document.querySelector('.red') を使用することもできます。および document.querySelectorAll('.red' )。
ただし、Element.querySelector と Element.querySelectorAll の実装には次のようなエラーがあります。

[code]

<スクリプトタイプ= text/javascript" >
function $(id){return document.getElementById(id);}
var d1 = $('d1');
var obj1 = d1.querySelector('div a ');
var obj2 = d1.querySelectorAll('div a');
alert(obj1); http://www.sina.com.cn/
alert(obj2) .length); // -> 1



これらの 2 つのメソッドをサポートしているブラウザでは、「http://www.sina.com. cn"、/"、"1" がそれぞれ表示されます。これは、目的の要素または要素コレクションがクエリされたことを意味します。これは、W3C の定義と矛盾します。定義によれば、「div a」は要素 d1 の範囲内で検索される必要があり、d1 には div がまったく存在しません。したがって、null、空のコレクションがそれぞれ返される必要があります。

jQuery 1.4.2 以前のバージョンでは、document.querySelectorAll のみが使用され、Element.querySelectorAll は使用されません。 Element.querySelectorAll は jQuery 1.4.3 以降で使用されていましたが、修正されました。セレクターの前に「#__sizzle__」を追加して、指定した要素内を強制的に検索します (行 3903 ～ 3918)。簡略化

try {
var query = '#' id ' div a'; (クエリ ));
alert(d1.querySelectorAll(クエリ).length);
} catch(e) {
} 最後に {
old ? d1.id = old : d1.removeAttribute( "id " );
}


この実装は非常に賢いもので、指定された範囲内の要素に ID がある場合、それを古いままにし、「__sizzle__」がそれを一時 ID として割り当てます。セレクター「div a」でそれを選択します。以前に指定した検索範囲は「#__sizzle__」、つまり d1 です。最終的なクリーニングには、finally ステートメントが使用されます。指定された範囲内の要素に ID がある場合は、古い ID に復元され、一時的な ID 属性「__sizzle__」が削除されます。

関連:

http://msdn.microsoft.com/en-us/library/cc288169(v=VS.85).aspx