JavaScript是一種廣泛使用的腳本語言，通過使用JavaScript，我們可以輕松地與HTML文檔交互。其中，獲取ID數組是JavaScript常用的一個操作，本文將詳細介紹如何獲取ID數組并且給出豐富的實例。

首先，我們來看一個最簡單的例子，假設我們有一個HTML文檔，其中有三個元素分別是：

<div id="box1">這是第一個元素</div><div id="box2">這是第二個元素</div><div id="box3">這是第三個元素</div>

如果我們想要獲取這三個元素的ID值，并且將它們存儲在一個數組中，我們可以使用JavaScript中的querySelectorAll()函數。具體代碼如下：

var boxArray = document.querySelectorAll("#box1, #box2, #box3");
for(var i = 0; i < boxArray.length; i++){
console.log(boxArray[i].id);
}

以上代碼中，querySelectorAll("#box1, #box2, #box3")會返回一個NodeList對象，這個對象包含了所有符合選擇器的元素。我們用一個for循環(huán)遍歷這個boxArray數組并且把它們的id值輸出到控制臺上。

除了直接書寫ID值外，我們還可以通過使用CSS選擇器來獲取ID元素。例如，我們想要獲取所有ID以“box”開頭的元素，可以使用以下代碼：

var boxArray = document.querySelectorAll('[id^="box"]');
for(var i = 0; i < boxArray.length; i++){
console.log(boxArray[i].id); 
}

在以上代碼中，我們使用了CSS選擇器'[id^="box"]'來匹配所有id值以“box”開頭的元素。同樣地，我們用一個for循環(huán)遍歷boxArray數組并且把它們的id值輸出到控制臺上。

有時候，在獲取ID數組時，我們想要根據多個選擇器條件進行篩選，這時候，我們可以使用JavaScript中的filter()函數。例如，我們想要選取所有Sally的家庭成員，代碼如下：

var boxArray = document.querySelectorAll(".family_member");
var sallyFamilyArray = Array.prototype.filter.call(boxArray, function(elem){
return elem.getAttribute("data-name") === "Sally";
});
for(var i = 0; i < sallyFamilyArray.length; i++){
console.log(sallyFamilyArray[i].id);
}

以上代碼中，我們首先通過querySelectorAll(".family_member")獲取了所有class為“family_member”的元素，然后使用Array.prototype.filter.call(boxArray, function(elem) {...})對元素進行篩選，其中函數(elem) {...}返回的是所有data-name屬性為“Sally”的元素。最后，我們用一個for循環(huán)遍歷sallyFamilyArray數組并且把它們的id值輸出到控制臺上。

到這里，我們已經介紹了如何獲取ID數組并且給出了豐富的示例。希望讀者通過本文的介紹可以掌握獲取ID數組的方法，并且能夠在實際開發(fā)中靈活應用。