HTML5の実戦とCSSセレクターの解析 - querySelectorAll()

以前、HTML5のセレクターquerySelector()を紹介しました。今日は、HTML5 に新しく追加されたセレクター querySelectorAll() を引き続き紹介します。

querySelectorAll() メソッドで受け取ったパラメータも CSS セレクターですが、一致するすべての要素が返されるのに対し、querySelector() メソッドは最初に一致した要素を返します。

querySelectorAll()メソッドはNodeListのインスタンスを返します。 NodeList は、すべてのプロパティとメソッドを備えたインスタンスです。その基礎となる実装は、ドキュメント検索の動的クエリではなく、要素セットのスナップショットに相当します。これにより、NodeList オブジェクトの使用によって通常発生するパフォーマンスの問題が回避されます。

querySelectorAll() メソッドに渡されたパラメータが有効である限り、このメソッドは見つかった要素の数に関係なく NodeList オブジェクトを返します。一致する要素が見つからない場合、NodeList は空になります。わかりやすく説明するために、小さな例を見てみましょう。

HTML コード

<p id="all" class="all">
	<i>梦龙小站</i>
	<p class="box">
		<em class="span">梦龙小站</em>
	</p>
	<i class="span">梦龙小站</i>
	<p class="box">
		<em>梦龙小站</em>
	</p>
</p>

JavaScript コード

//获取类名为all的<p>中所有的<i>元素，类似于getElementsByTagName("i")
var i = document.getElementById("all").querySelectorAll("i");

//获取类名为span的所有元素
var span = document.querySelectorAll(".span");

//获取所有<p>标签中的所有<em>元素
var em = document.querySelectorAll("p em");

返された NodeList 内の各要素を取得するには、 item() メソッドを使用するか、角かっこ構文を使用できます。小さな例は次のとおりです。

htmlcoderreee

javascriptコードrreeeブラウザによってサポートされていないセレクターまたはセレクターが、queryselectorall（）メソッドの文法が存在するパラメーターに渡された場合エラーの場合、querySelectorAll() メソッドはエラーを報告します。

HTML5の実戦とCSSセレクターの分析 - querySelectorAll() ここで紹介するのはquerySelectorAll()メソッドはHTML5のほんの一部です。 HTML5 を学習する過程で、私たちはあらゆる小さな知識を消化し、最後に向かって一歩ずつ進んでいきます。蒙龍ステーションをよろしくお願いします。HTML5の実戦と解析はまだまだ続きますので、ぜひフォローしてください。

上記は HTML5 の実戦と CSS セレクター - querySelectorAll() の分析の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。