JS用getElementsByClassName獲取HTML元素的方法

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

GetElementsByClassName()是一個(gè)方法，可以獲取為其設(shè)置目標(biāo)類(lèi)名稱(chēng)的所有HTML元素,本篇文章來(lái)給大家介紹關(guān)于GetElementsByClassName()方法的具體使用。

例如，HTML元素的類(lèi)名如下

<h2 class="sample">標(biāo)題</h2>
<p class="test">文本</p>
<a class="test" href="#">鏈接</a>

它具有可以為多個(gè)HTML元素賦予相同類(lèi)名的功能。

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

如何使用getElementsByClassName()

我們先來(lái)看一下基本的語(yǔ)法

通過(guò)使用字符串指定要提取到目標(biāo)范圍的類(lèi)名來(lái)使用。

doccument.getElementsByClassName( 類(lèi)名 );

可以通過(guò)將目標(biāo)范圍設(shè)置為document來(lái)指定整個(gè)HTML元素。

當(dāng)然，也可以設(shè)置任意范圍。（詳情將在后面描述）

另請(qǐng)注意，返回值是一個(gè)非常類(lèi)似于數(shù)組的HTML集合。

獲取具有任意類(lèi)名的所有元素的方法

首先假設(shè)有以下HTML。

<h2 class="sample">標(biāo)題1</h2>
<p class="test">文本1</p>
<h3 class="sample">標(biāo)題2</h3>
<p class="test">文本2</p>

有兩個(gè)類(lèi)名sample和test

例如，要獲取具有類(lèi)名“test”的所有HTML元素，可以按如下方式編寫(xiě)。

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

執(zhí)行結(jié)果

<p class="test">文本1</p>
<p class="test">文本2</p>

如果在參數(shù)中將“test”指定為字符串，則可以獲取包含該類(lèi)名的所有HTML元素的集合。

之后，如果使用類(lèi)似下標(biāo)的數(shù)組輸出，則可以獲得HTML元素，如執(zhí)行結(jié)果。

指定多個(gè)類(lèi)的方法

例如，以下HTML

<h2 class="sample test">標(biāo)題1</h2>
<p class="test">文本1</p>
<h3 class="sample test">標(biāo)題2</h3>
<p class="test">文本2</p>

在這個(gè)例子中，h2和h3要素被賦予了2個(gè)類(lèi)名

即使在這種情況下，您也可以通過(guò)為參數(shù)提供多個(gè)類(lèi)名來(lái)獲取所有類(lèi)。

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

執(zhí)行結(jié)果

<h2 class="sample test">標(biāo)題1</h2>
<h3 class="sample test">標(biāo)題2</h3>

GetElementsByClassName()的使用          

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

我們看看以下HTML元素

<h2 class="sample test">標(biāo)題1</h2>
<p class="test">文本1</p>
<div id="wrap">
    <h3 class="sample test">標(biāo)題2</h3>
    <p class="test">文本2</p>
</div>

在該示例中，使用div元素形成分層結(jié)構(gòu)。

通過(guò)這樣描述，例如可以?xún)H以id屬性值wrap內(nèi)的HTML元素為對(duì)象。

指定元素范圍搜索類(lèi)的方法

如果像上面那樣設(shè)置div元素的范圍，請(qǐng)按如下所示進(jìn)行編寫(xiě)。

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

執(zhí)行結(jié)果

<h3 class="sample test">標(biāo)題2</h3>

首先，準(zhǔn)備getElementById()來(lái)獲取div元素。

之后，以取得的div元素為對(duì)象來(lái)執(zhí)行g(shù)etElementsByClassName()。

從執(zhí)行結(jié)果來(lái)看，只獲得div元素內(nèi)的h3元素。

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