getElementsByClassName() を使用してクラス名から複数の HTML 要素を取得する方法

GetElementsByClassName()は、対象のクラス名が設定されたHTML要素をすべて取得できるメソッドです。この記事では、GetElementsByClassName()メソッドの具体的な使い方を紹介します。

#推奨マニュアル:1.
HTML5最新版リファレンスマニュアル2.
JavaScript中国語リファレンスマニュアル

たとえば、HTML要素のクラス名は次のとおりです

<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つのクラス名があります

たとえば、クラス名が「test」のHTML要素をすべて取得するには、次のように記述します。

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 サイトの他の関連記事を参照してください。