JavaScript中querySelector()獲取HTML元素的案例

這篇文章主要介紹了JavaScript中querySelector()獲取HTML元素的案例，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

QuerySelector()是一種可以從JavaScript 檢測和獲取任意HTML元素的方法，雖然JavaScript從開始就有可以獲得HTML元素的getElemenById()和getElemetnsByClasNamo()等方法，但是，如果使用querySelector()，則可以在jQuery意義上有選擇地指定HTML元素，而無需了解id屬性值，class屬性值等。

使用querySelector()檢索任何HTML元素。

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

通常將在目標范圍上執行querySelector()。

document.querySelector( CSS選擇器 )

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

需要注意的是，程序在獲取第一個匹配的HTML元素時就會結束。

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

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

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

示例如下

HTML

<h2 class="sample">標題示例</h2>
<p id="test">內容示例</p>

JavaScript

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

運行結果如下

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

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

從執行結果中可以看出元素已被獲取。

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

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

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

document.querySelectorAll(CSS選擇器)

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

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

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

我們來看具體的示例

HTML代碼

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

在該示例中，排列了多個列表元素。

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

JavaScript

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

在此示例中，類屬性值“list”被指定為querySelectorAll()的參數。

這將指定所有列表元素，因此可以獲得所有列表項。

當然，你可以按原樣設置“li”元素，但是要注意與其他列表元素的平衡。

querySelectorAll()獲取的元素稱為NodeList，存儲類似于數組的數據結構。

下面我們使用'forEach'一次處理一個元素，它可以有效地重復處理數組。

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

運行結果如下

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

通過指定參數“value”，可以像上述結果一樣獲得每個HTML元素。

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

感謝你能夠認真閱讀完這篇文章，希望小編分享JavaScript中querySelector()獲取HTML元素的案例內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!