JavaScript中querySelector()獲取HTML元素的方法介紹

簡(jiǎn)而言之，就是可以使用querySelector()檢索任何HTML元素。

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

通常將在目標(biāo)范圍上執(zhí)行querySelector()。

document.querySelector( CSS選擇器 )

在這種情況下將對(duì)整個(gè)document執(zhí)行querySelector()。可以通過為參數(shù)指定類似jQuery的CSS選擇器來獲取任意HTML元素。

需要注意的是，程序在獲取第一個(gè)匹配的HTML元素時(shí)就會(huì)結(jié)束。

也就是說，如果要獲取多個(gè)元素就需要來創(chuàng)建一個(gè)循環(huán)過程，或者使用我們將在后面會(huì)說到的querySelectorAll().

我們繼續(xù)來看如何使用querySelector()？

獲取具有ID和Class屬性的HTML元素

示例如下

HTML

<h1 class="sample">標(biāo)題示例</h1>
<p id="test">內(nèi)容示例</p>

JavaScript

var elem1 = document.querySelector('.sample');
var elem2 = document.querySelector('#test');
console.log(elem1);
console.log(elem2);

運(yùn)行結(jié)果如下

可以看到querySelector()的每個(gè)參數(shù)都指定了一個(gè)CSS選擇器。

由此，同樣的querySelector()也可以根據(jù)參數(shù)的指定方法取得任意的HTML要素。

從執(zhí)行結(jié)果中可以看出元素已被獲取。

下面我們就來看querySelectorAll()的使用方法

querySelectorAll()可以獲取多個(gè)HTML元素。

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

document.querySelectorAll(CSS選擇器)

這樣，指定參數(shù)的方法和目標(biāo)的范圍與querySelector()相同。

最大的區(qū)別是你可以獲得所有匹配的HTML元素！

由于queryselector()只能檢索第一個(gè)匹配的元素，所以我們獲取多個(gè)元素就可以使用querySelectorAll()。

我們來看具體的示例

HTML代碼

<ul>
 <li class="list">列表１</li>
 <li class="list">列表２</li>
 <li class="list">列表３</li>
</ul>

在該示例中，排列了多個(gè)列表元素。

要檢索所有此列表元素，可以執(zhí)行以下操作

JavaScript

var elem = document.querySelectorAll('.list');
console.log(elem);

在此示例中，類屬性值“l(fā)ist”被指定為querySelectorAll()的參數(shù)。

這將指定所有列表元素，因此可以獲得所有列表項(xiàng)。

當(dāng)然，你可以按原樣設(shè)置“l(fā)i”元素，但是要注意與其他列表元素的平衡。

querySelectorAll()獲取的元素稱為NodeList，存儲(chǔ)類似于數(shù)組的數(shù)據(jù)結(jié)構(gòu)。

下面我們使用'forEach'一次處理一個(gè)元素，它可以有效地重復(fù)處理數(shù)組。

var elem = document.querySelectorAll('.list');
elem.forEach(function(value) {
 console.log(value);
})

運(yùn)行結(jié)果如下

在此示例中，使用querySelectorAll()獲得的結(jié)果由forEach語句循環(huán)。

通過指定參數(shù)“value”，可以像上述結(jié)果一樣獲得每個(gè)HTML元素。

注意：可以對(duì)使用querySelectorAll()獲取的HTML元素執(zhí)行任意的處理！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com