jQuery セレクター querySelector 使用ガイド_jquery

はじめに

HTML5 では、Web API に 2 つの新しいメソッド document.querySelector と document.querySelectorAll が導入され、DOM から要素をより簡単に選択できます。それらの機能は jQuery のセレクターに似ています。これにより、ネイティブ JavaScript コードの記述が非常に簡単になります。
使用法

2 つのメソッドは同様の構文を使用し、どちらも文字列パラメータを受け取ります。このパラメータは有効な CSS 選択構文である必要があります。

コードをコピーします コードは次のとおりです:

要素 = document.querySelector('セレクター');
elementList = document.querySelectorAll('セレクター');

selector パラメーターには、カンマで区切られた複数の CSS セレクターを含めることができます。

コードをコピーします コードは次のとおりです:

element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');

これら 2 つのメソッドを使用すると、疑似クラス ステータスを持つ要素を見つけることができません。たとえば、querySelector(':hover') は期待した結果を取得できません。

querySelector

コードをコピーします コードは次のとおりです:

element = document.querySelector('div#container');// コンテナの ID を持つ最初の div
を返します element = document.querySelector('.foo,.bar');//foo または bar スタイル クラスの最初の要素を返します

querySelectorAll

このメソッドは条件を満たすすべての要素を返し、結果はnodeListコレクションです。検索ルールは前に説明したものと同じです。

elements = document.querySelectorAll('div.foo');//foo クラス スタイルのすべての div を返します
返されたnodeListコレクション内の要素はリアルタイムではないことに注意してください。