如何使用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

例如，要取得具有類別名稱「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()的使用           

#指定document以外的根元素的方法

#我們來看看以下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屬性值wrap內的HTML元素為物件。

指定元素範圍搜尋類別的方法

如果像上面那樣設定div元素的範圍，請如下所示進行編寫。

var div = document.getElementById('wrap');
var result = div.getElementsByClassName('test sample');
console.log(result[0]);

執行結果

<h2 class="sample test">标题2</h2>

首先，準備getElementById()來取得div元素。

之後，以取得的div元素為物件來執行getElementsByClassName()。

從執行結果來看，只取得div元素內的h2元素。

相文章推薦：         
1.getElementsByClassName()如何使用？總結getElementsByClassName()實例用法
相關影片推薦：         
1.獨孤九賤(1)_HTML5影片教學         
2.JavaScript極速入門_玉女心經系列

以上是如何使用getElementsByClassName()從類別名稱中取得多個HTML元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！