ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript の高度なセレクター querySelector と querySelectorAll_基礎知識の包括的な分析
querySelector メソッドと querySelectorAll メソッドは、W3C セレクター API 仕様で定義されています。これらの機能は、CSS セレクターの仕様に従って、ドキュメント内の指定された要素を簡単に見つけることです。
現在、ほぼすべての主要ブラウザがこれらをサポートしています。 IE8 (含む) 以降、Firefox、Chrome、Safari、Opera を含みます。
querySelector および querySelectorAll は仕様で次のインターフェイスを定義します:
module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; Element implements NodeSelector; };
インターフェイス定義から、Document、DocumentFragment、および Element がすべて NodeSelector インターフェイスを実装していることがわかります。つまり、これら 3 種類の要素にはすべて 2 つのメソッドがあります。 querySelector および querySelectorAll のパラメーターは、CSS セレクターに準拠した文字列である必要があります。違いは、querySelector はオブジェクトを返し、querySelectorAll はコレクション (NodeList) を返すことです。
ページ上の I 属性 D が test である要素を取得します:
1 document.getElementById("test"); 2 document.querySelector("#test"); 3 document.querySelectorAll("#test")[0];
ページ上のクラス属性が「red」である要素を取得します:
document.getElementsByClassName('red') document.querySelector('.red') document.querySelectorAll('.red')
追記:
ただし、返される nodeList コレクション内の要素は非ライブであることに注意してください。リアルタイムの返結果と非リアルタイムの返結果を区別したい場合は、次の例を参照してください。
<div id="container"> <div></div> <div></div> </div>
//首先选取页面中id为container的元素 container=document.getElementById('#container'); console.log(container.childNodes.length)//结果为2 //然后通过代码为其添加一个子元素 container.appendChild(document.createElement('div')); //这个元素不但添加到页面了,这里的变量container也自动更新了 console.log(container.childNodes.length)//结果为3
Element.querySelector と Element.querySelectorAll および jQuery(element).find(selector) セレクターの違い:
<SPAN style="FONT-SIZE: 15px"><divid="test1"><ahref="http://www.jb51.net/">脚本之家</a></div> <pid="bar">111</p> <script> var d1 = document.getElementById('test1'), obj1 = d1.querySelector('div a'), obj2 = d1.querySelectorAll('div a'); obj3 = $(d1).find('div a'); console.log(obj1)//<a href="http://www.jb51.net/">脚本之家</a> console.log(obj2.length)//1 console.log(obj3)//null </script> </SPAN>
querySelectorAll 要素自体を含む、セレクターの説明に一致するドキュメント内のすべてのノードを検索します
jQuery(element).find(selector) 要素自体を除く、セレクターの説明に一致するドキュメント内のすべてのノードを検索します