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

上記の例を通して、どの要素がリアルタイムで更新されるのかをよく理解できます。 document.getElementById は、サブ要素を追加した後、すべてのサブ要素の数を再度取得し、元の 2 から 3 に更新されたリアルタイムの結果を返します (これは一部のブラウザーの影響を考慮していません)。 Chrome などでは、空白も子ノードに解決されるとマークされます)。

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) 要素自体を除く、セレクターの説明に一致するドキュメント内のすべてのノードを検索します

JavaScript の高度なセレクター querySelector および querySelectorAll の上記の包括的な分析は、エディターによって共有されたすべての内容です。参考にしていただければ幸いです。また、Script Home をサポートしていただければ幸いです。