JS用getElementsByClassName獲取HTML元素的方法

這篇文章將為大家詳細講解有關JS用getElementsByClassName獲取HTML元素的方法，文章內容質量較高，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

GetElementsByClassName()是一個方法，可以獲取為其設置目標類名稱的所有HTML元素,本篇文章來給大家介紹關于GetElementsByClassName()方法的具體使用。

例如，HTML元素的類名如下

<h2 class="sample">標題</h2>
<p class="test">文本</p>
<a class="test" href="#">鏈接</a>

它具有可以為多個HTML元素賦予相同類名的功能。

因此，通常在一個HTML文件中有許多相同的類名，使用getElementsByClassName()，我們可以使用任意類名提取所有HTML元素。

如何使用getElementsByClassName()

我們先來看一下基本的語法

通過使用字符串指定要提取到目標范圍的類名來使用。

doccument.getElementsByClassName( 類名 );

可以通過將目標范圍設置為document來指定整個HTML元素。

當然，也可以設置任意范圍。（詳情將在后面描述）

另請注意，返回值是一個非常類似于數組的HTML集合。

獲取具有任意類名的所有元素的方法

首先假設有以下HTML。

<h2 class="sample">標題1</h2>
<p class="test">文本1</p>
<h3 class="sample">標題2</h3>
<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

<h2 class="sample test">標題1</h2>
<p class="test">文本1</p>
<h3 class="sample test">標題2</h3>
<p class="test">文本2</p>

在這個例子中，h2和h3要素被賦予了2個類名

即使在這種情況下，您也可以通過為參數提供多個類名來獲取所有類。

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

執行結果

<h2 class="sample test">標題1</h2>
<h3 class="sample test">標題2</h3>

GetElementsByClassName()的使用          

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

我們看看以下HTML元素

<h2 class="sample test">標題1</h2>
<p class="test">文本1</p>
<div id="wrap">
    <h3 class="sample test">標題2</h3>
    <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]);

執行結果

<h3 class="sample test">標題2</h3>

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

之后，以取得的div元素為對象來執行getElementsByClassName()。

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

以上就是JS用getElementsByClassName獲取HTML元素的方法，看完之后是否有所收獲呢？如果想了解更多相關內容，歡迎關注億速云行業資訊，感謝各位的閱讀。