HTML 5のquerySelector()メソッドもquerySelectorAll()メソッドも前編でご紹介しましたが、いかがでしょうか?ここで復習すると、querySelector()メソッドは、渡されたCSSセレクタに一致する最初の要素を返すことです.querySelectorAll()メソッドは、転送されたCSSセレクタに一致するすべての要素を返すNodeListオブジェクトです.簡単に振り返ると、新しい方法であるgetElementsByClassName()の方法を共有します.
HTML 4がWeb開発分野で多くの応用を得るにつれて、HTML 4は多くの変化をもたらした.classクラス名はCSSで広く使われているため、JavaScriptコードを記述する際に取得するのはIDではなくclassクラス名である場合が多い.そこでHTML 5にgetElementsByClassName()メソッドが追加されました.getElementsByClassName()メソッドは、documentオブジェクトおよびすべてのHTML要素から呼び出すことができます.要素のクラス名を取得するこの取得方法は、多くのJavaScriptライブラリに最初に登場し、DOM機能によって実現され、パフォーマンスの面で消費が大きい.このオリジナルのgetElementsByClassName()メソッドがあれば、パフォーマンスの面で多くの節約ができます.
getElementsByClassName()メソッドは、CSSセレクタの文字列でもあり、1つでも複数でもよいパラメータを受信します.getElementsByClassName()メソッドは、指定したクラスのすべての要素を持つNodeListを返します.注意複数のクラス名が伝わる場合、クラス名の前後順は重要ではありません.理論の基礎はまずここまで紹介しますが、次は小さな例を見てみましょう.

1、すべてのクラス名boxを取得し、赤い背景を加える

HTMLコード

 

    div
    div

	    i
	
    div


	    em


	    em
	    em

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名box 2エレメントのうちクラス名boxのエレメントを取得し、赤い背景を付ける

HTMLコード

    div
    div

	    i
	
    div


	    em


	    em
	    em

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に戻ります.documentオブジェクトでgetElementsByClassName()メソッドを呼び出すと、クラス名に一致するすべての要素が常に返されます.エレメントでgetElementsByClassName()メソッドを呼び出すと、子孫エレメントで一致するエレメントのみが返されます.
この方法を使用すると、IDまたはラベルを使用してイベントハンドラを追加することに限らず、特定のクラス名を持つ要素にイベントハンドラを追加することがより容易になります.返されるオブジェクトはNodeListであるため、getElementsByTagName()メソッドおよび他のNodeListを返すDOMメソッドと同様のパフォーマンスの問題がある.forループで追加する必要があります.そこでモンロンは,JavaScriptライブラリのメソッドを用いて要素を取得することと,getElementsByClassName()メソッドを用いて要素を取得することにそれぞれメリットとデメリットがあると考えている.
getElementsByClassName()メソッドでは、IE 9+、Firefox 3+、Safari 3などの現代ブラウザがサポートされています.1+、Chrome、Opera 9.5+.
HTML 5の実戦と剖析のCSSセレクタであるgetElementsByClassName()の方法をご紹介します.まとめて、getElementsByClassName()メソッドは、JavaScriptオリジナルメソッドで要素クラス名を取得します.getElementsByClassName()メソッドはHTML 5に新しく追加されたメソッドで、HTML 5に関する内容はモンロンステーションのHTML 5に関する更新に注目してください.皆さんの応援に感謝します.