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

<h1 class="sample">标题示例</h1>
<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元素的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！