HTML5の実戦とCSSセレクターの解析 - getElementsByClassName()メソッド

HTML5 の querySelector() メソッドと querySelectorAll() メソッドについては、どれくらい理解できたでしょうか。ここで、querySelector() メソッドが CSS に一致するものを返し、渡します。セレクター; querySelectorAll() メソッドは、渡された CSS セレクター (NodeList オブジェクト) に一致するすべての要素を返します。簡単に確認した後、新しいメソッド getElementsByClassName() メソッドを共有しましょう。

HTML4がWeb開発の分野で広く使用されるようになったことで、HTML4には多くの変更が加えられました。 CSS ではクラス名が広く使用されているため、JavaScript コードを記述するときに取得する必要があるのは ID ではなくクラス名であることがよくあります。それ以来、HTML5 には getElementsByClassName() メソッドが追加されました。 getElementsByClassName() メソッドは、ドキュメント オブジェクトおよびすべての HTML 要素を通じて呼び出すことができます。要素のクラス名を取得するメソッドは、多くの JavaScript ライブラリで最初に登場しましたが、これらはすべて DOM 関数を通じて実装されており、多くのパフォーマンスを消費します。このネイティブの getElementsByClassName() メソッドを使用すると、パフォーマンスが大幅に節約されます。

getElementsByClassName() メソッドはパラメーターを受け取ります。このパラメーターは、1 つまたは複数の CSS セレクターの文字列でもあります。 getElementsByClassName() メソッドは、指定されたクラスのすべての要素を含む NodeList を返します。複数のクラス名が渡される場合、クラス名の順序は重要ではないことに注意してください。ここでは最初に理論的根拠を紹介します。小さな例を見てみましょう。

1.すべてのクラス名ボックスを取得し、赤い背景を追加します

HTMLコード

<p id="box1" class="box">梦龙小站p</p>
<p>梦龙小站p</p>
<section id="box2">
	<i id="oi123123" class="oi">梦龙小站i</i>
	<p class="box">梦龙小站p</p>
</section>
<section id="box3" class="box3">
	<em class="op">梦龙小站em</em>
</section>
<p>
	<em class="box">梦龙小站em</em>
	<em id="op123123" class="op">梦龙小站em</em>
</p>

JavaScriptコード

var allBox = document.getElementsByClassName("box"),
	i, len;

alert(allBox[0].id) //[object NodeList]

for(i=0, l = allBox.length; i < l; i++){
	allBox[i].style.background = "red";
}

プレビュー効果

2.ID名box2の内部要素を取得しますクラス名が box で背景が赤い要素

HTML コード

<p id="box1" class="box">梦龙小站p</p>
<p>梦龙小站p</p>
<section id="box2">
	<i id="oi123123" class="oi">梦龙小站i</i>
	<p class="box">梦龙小站p</p>
</section>
<section id="box3" class="box3">
	<em class="op">梦龙小站em</em>
</section>
<p>
	<em class="box">梦龙小站em</em>
	<em id="op123123" class="op">梦龙小站em</em>
</p>

JavaScript コード

//获取类名是oi和op的元素，并加上红色背景
var allBox = document.getElementById("box2").getElementsByClassName("box"),	i, len;

alert(allBox[0].id) //[object NodeList]


for(i=0, l = allBox.length; i < l; i++){	allBox[i].style.background = "red";
}

プレビュー効果

このメソッドが呼び出されると、一致する要素が見つかる限り NodeList が返されます。ドキュメント オブジェクトで getElementsByClassName() メソッドを呼び出すと、常にクラス名に一致するすべての要素が返されます。要素に対して getElementsByClassName() メソッドを呼び出すと、子孫要素の中で一致する要素のみが返されます。

このメソッドを使用すると、特定のクラス名を持つ要素にイベント ハンドラーを追加するのがより便利になり、ID やタグを使用してイベント ハンドラーを追加することに限定される必要がなくなりました。返されるオブジェクトは NodeList であるため、このメソッドを使用すると、getElementsByTagName() メソッドや NodeList を返す他の DOM メソッドを使用する場合と同じパフォーマンスの問題が発生します。すべては for ループを使用して追加する必要があります。したがって、Menglong 氏は、JavaScript ライブラリのメソッドを使用して要素を取得することと、getElementsByClassName() メソッドを使用して要素を取得することには長所と短所があると考えています。

getElementsByClassName() メソッドは、IE9 以降、Firefox3 以降、Safari3.1 以降、Chrome、Opera9.5 以降などのいくつかの最新のブラウザをサポートしています。

これでHTML5の実戦紹介とCSS selector-getElementsByClassName()メソッドの解析を終わります。要約すると、 getElementsByClassName() メソッドは JavaScript ネイティブ メソッドを使用して要素クラス名を取得します。 getElementsByClassName() メソッドは、HTML5 で新しく追加されたメソッドです。HTML5 に関する関連コンテンツについては、Menglong Station の HTML5 の関連アップデートにご注意ください。ご協力ありがとうございました。

上記は HTML5 の実戦と CSS selector-getElementsByClassName() メソッドの分析の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。