QuerySelectorおよびQuerySelectorAllメソッドは、W3CセレクターAPI仕様で定義されています。それらの機能は、CSSセレクターの仕様に従って、ドキュメント内の指定された要素を便利に見つけることです。
現在、それらはほぼ主流のブラウザによってサポートされています。 IE8（包括的）および上記のバージョン、Firefox、Chrome、Safari、Operaを含む。
QuerySelectorとQuerySelectorAllの仕様内の次のインターフェイスを定義します。
モジュールdom {[補足、nointerfaceObject]インターフェイスノードセレクター{要素querySelector（ドンストリングセレクター）; NodeList QuerySeLectorall（ドンストリングセレクター）; };ドキュメントはノードセレクターを実装します。 DocumentFragmentはノードセレクターを実装します。要素はノードセレクターを実装します。 };インターフェイス定義から、そのドキュメント、ドキュメントフラグメント、および要素がすべてノードセレクターインターフェイスを実装することがわかります。つまり、これら3つのタイプの要素すべてに2つの方法があります。 QuerySelectorとQuerySelectorallのパラメーターは、CSSセレクターに適合する文字列でなければなりません。違いは、QuerySelectorがオブジェクトを返し、QuerySelectorAllがコレクション（Nodelist）を返すことです。
私が属性dであるというページの要素を取得します：テスト：
1 document.getElementById（ "test"）; 2 document.queryselector（ "＃test"）; 3 document.queryselectorall（ "＃test"）[0];
ページクラス属性「RED」で要素を取得します：
document.getElementsByClassName（ 'red'）document.queryselector（ '。赤'）document.queryselectorall（ '。レッド'）document.queryselectorall（ '。レッド'））
PS：
ただし、返されたノデリストコレクションの要素は非ライブであることに注意する必要があります。リアルタイムの非現実的な返品結果を区別したい場合は、次の例を参照してください。
<div id = "container"> <div> </div> <div> </div> </div>
//最初に、コンテナ= document.getElementbyId（ '＃container'）; console.log（container.childnodes.length）を使用してページにIDコンテナを使用して要素を選択します。 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 = "// www.vevb.com/">wulin.com </a> </div> <pid =" bar "> 111 </p> <scrip> var d1 = document.getelementbyid（ 'test1'）、obj1 = d1. kerylector（ 'diselector（' diseleter） d1.queryselectorall（ 'div a'）; obj3 = $（d1）.find（ 'div a'）; console.log（obj1）// <a href = "// www.vevb.com/">wulin.com </a> console.log（obj2.length）// 1 console.log（obj3）// null </script> </span>
querySelectorallは、要素自体を含むドキュメント内のセレクターの説明を満たすすべてのノードを見つけます
jQuery（element）.find（selector）ドキュメントの選択の説明を満たしているすべてのノードを見つけ、要素自体が含まれていない
上記のJavaScript Advanced Selector QuerySelectorとQuerySelectorallの上記の包括的な分析は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。