HTML 5実戦と剖析のCSSセレクタ-querySelectorAll()

前に、HTML 5のセレクタquerySelector()について紹介しました.今日は、HTML 5に新しく追加されたセレクタquerySelectorAll()を共有していきます.
querySelectorAll()メソッドが受信したパラメータもCSSセレクタですが、すべての一致要素が返され、querySelector()メソッドは最初の一致要素が返されます.
querySelectorAll()メソッドは、NodeListのインスタンスを返します.NodeListは、すべての属性とメソッドを持つインスタンスです.ドキュメントを検索する動的クエリーではなく、要素のセットに相当するスナップショットを実装します.これにより、NodeListオブジェクトの使用によって通常発生するパフォーマンスの問題を回避できます.
querySelectorAll()メソッドに渡されるパラメータが有効である限り、このメソッドは、見つかった要素がいくつあるかにかかわらず、NodeListオブジェクトを返します.一致する要素が見つからない場合、NodeListは空になります.次は小さな例を見て、もっとよく説明します.
HTMLコード

<div id="all" class="all">
	<i>    </i>
	<p class="box">
		<em class="span">    </em>
	</p>
	<i class="span">    </i>
	<p class="box">
		<em>    </em>
	</p>
</div>

JavaScriptコード

//     all <div>    <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()メソッドを使用するか、角カッコ構文を使用します.小さな例は次のとおりです.
HTMLコード

<div id="all" class="all">
	<i>    </i>
	<p class="box">
		<em class="span">    </em>
	</p>
	<i class="span">    </i>
	<p class="box">
		<em>    </em>
	</p>
</div>

JavaScriptコード

//    <p>      <em>  
var em = document.querySelectorAll("p em");

var i, len, emOne;
for(i=0, len = em.length; i<len; i++){
	emOne = em[i];
	//   em.item(i);
	emOne.className = "meng";
}

querySelectorAll()メソッドのパラメータにブラウザでサポートされていないセレクタまたはセレクタに構文エラーが入力された場合、querySelectorAll()メソッドはエラーを報告します.
HTML 5の実戦と剖析のCSSセレクタであるquerySelectorAll()をご紹介しますが、querySelectorAll()の方法はHTML 5のほんの一部にすぎません.HTML 5を学ぶ道では、小さな知識を消化し、一歩一歩ゴールに向かいます.夢龍小駅へのご支持に感謝します.HTML 5の実戦と剖析はまだ続いています.追跡を続けてください.