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中文網其他相關文章！
