ホームページ > 記事 > ウェブフロントエンド > getElementsByClassName() を使用してクラス名から複数の HTML 要素を取得する方法
GetElementsByClassName()は、対象のクラス名が設定されたHTML要素をすべて取得できるメソッドです。この記事では、GetElementsByClassName()メソッドの具体的な使い方を紹介します。
#推奨マニュアル:1.たとえば、HTML要素のクラス名は次のとおりです
HTML5最新版リファレンスマニュアル2.
JavaScript中国語リファレンスマニュアル
<h1 class="sample">标题</h1> <p class="test">文本</p> <a class="test" href="#">链接</a>複数のHTML要素に同じクラス名を付ける機能があります。 したがって、HTML ファイルには通常、同じクラス名が多数存在します。 getElementsByClassName() を使用すると、任意のクラス名を使用してすべての HTML 要素を抽出できます。
getElementsByClassName()の使い方
まずは基本構文を見てみましょう対象スコープに抽出するクラス名を指定します使用する文字列を使用します。doccument.getElementsByClassName( 类名 );ターゲット スコープを document に設定することで、HTML 要素全体を指定できます。 もちろん任意の範囲を設定することも可能です。 (詳細は後述します) また、戻り値は配列によく似た HTML コレクションであることに注意してください。
任意のクラス名を持つすべての要素を取得するメソッド
まず、次の HTML があると仮定します。<h1 class="sample">标题1</h1> <p class="test">文本1</p> <h2 class="sample">标题2</h2> <p class="test">文本2</p>sampleとtestの2つのクラス名があります
var result = document.getElementsByClassName('test'); console.log(result[0]); console.log(result[1]);実行結果
<p class="test">文本1</p> <p class="test">文本2</p>パラメータに文字列として「test」を指定すると、クラス名を含むすべてのHTML要素のコレクションを取得できます。 あとは配列出力を添え字のように使えば、実行結果などのHTML要素を取得できます。
複数のクラスを指定する方法
たとえば、次の HTML<h1 class="sample test">标题1</h1> <p class="test">文本1</p> <h2 class="sample test">标题2</h2> <p class="test">文本2</p>この例では、h1 要素と h2 要素に 2 つのクラスが割り当てられています。 この場合でも、パラメータに複数のクラス名を指定することで、すべてのクラスを取得できます。
var result = document.getElementsByClassName('sample test'); console.log(result[0]); console.log(result[1]);実行結果
<h1 class="sample test">标题1</h1> <h2 class="sample test">标题2</h2>
GetElementsByClassName()の使い方
ドキュメント以外のルート要素を指定する方法実際に見てみましょう。次の HTML 要素を見てください<h1 class="sample test">标题1</h1> <p class="test">文本1</p> <div id="wrap"> <h2 class="sample test">标题2</h2> <p class="test">文本2</p> </div>この例では、階層構造を形成するために div 要素が使用されています。 この記述では、例えば、id 属性値のラップ内の HTML 要素のみをオブジェクトとして使用できます。
要素範囲検索クラスの指定方法
上記のようにdiv要素の範囲を設定する場合は以下のように記述します。var div = document.getElementById('wrap'); var result = div.getElementsByClassName('test sample'); console.log(result[0]);実行結果
<h2 class="sample test">标题2</h2>まず、div要素を取得するgetElementById()を用意します。 その後、取得したdiv要素をオブジェクトとしてgetElementsByClassName()を実行します。 実行結果からすると、div要素内のh2要素のみが取得されています。
おすすめの写真記事: 1.
getElementsByClassName() の使用方法? getElementsByClassName() インスタンスの使用法の概要
関連ビデオの推奨事項: . (1)_HTML5 ビデオ チュートリアル
2.JavaScript クイック スタート_翡翠少女般若心経シリーズ
以上がgetElementsByClassName() を使用してクラス名から複数の HTML 要素を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。