HTMLCollection 對象詳解，以及為什么循環獲取的dom合集操作可能會出現下標不正確的情況？

有時候循環dom合集，然后操作其中的某些dom之后，發現下標不正確了

比如我們要刪除一個dom合集的時候：

            var selectDom = document.getElementsByClassName("active");
            for(var i=0; i<selectDom.length; i++){
                content.removeChild(selectDom[i]);
            }

上面代碼中，我們獲取了選中項（class為active），然后循環進行刪除，但是最后發現，只能刪除一部分dom

這是由於HTML DOM 中的 HTMLCollection 是“活”的；如果基本的文檔改變時，那些改變通過所有 HTMLCollection 對象會立即顯示出來。

當我們刪除了第一個.active的時候，其實selectDom已經發生了改變，這樣再進行后續第i個的操作就會有問題。

 

解決方案：可以將dom先存到一個數組中，然后循環數組操作，這時候數組內的元素指向dom本身，及時dom發生了改變，我們新的數組的長度和指向是不會改變的。

上面的代碼可修改為：

            var selectDom = document.getElementsByClassName("active");
            var newArr = [];
            for(var i=0; i<selectDom.length; i++){
                newArr.push(selectDom[i]);
            }
            for(var i=0; i<newArr.length; i++){
                content.removeChild(newArr[i]);
            }

 

HTMLCollection 對象詳細解釋（源自w3cschool）：
HTMLCollection 是一個接口，表示 HTML 元素的集合，它提供了可以遍歷列表的方法和屬性。
HTML DOM 中的 HTMLCollection 是“活”的；如果基本的文檔改變時，那些改變通過所有 HTMLCollection 對象會立即顯示出來。
下面的每個項目（以及它們指定的屬性）都返回 HTMLCollection：
Document (images, applets, links, forms, anchors)
form (elements)
map (areas)
select (options)
table (rows, tBodies)
tableSection (rows)
row (cells)
HTMLDocument 接口的許多屬性都是 HTMLCollection 對象，它提供了訪問諸如表單、圖像和鏈接等文檔元素的便捷方式。form.elements 和 select.options 都是 HTMLCollection 對象。HTMLCollection 還提供了遍歷 Table 的各行以及 TableRow 的各個單元格的一種方便方法。
在上面已經提到了，HTMLCollection 對象是帶有方法的 HTML 元素的集合，用它可以通過元素在文檔中的位置或它們的 id 屬性、name 屬性獲取元素。在 JavaScript 中，HTMLCollection 對象的行為和只讀數組一樣，可以使用 JavaScript 的方括號，通過編號或名稱索引一個 HTMLCollection 對象，而不必調用 item() 方法和 namedItem() 方法。
HTMLCollection 對象是只讀的，不能給它添加新元素，即使采用 JavaScript 數組語法也是如此。
HTMLCollection 對象和 NodeList 對象很相似，但前者可能既能用名稱索引也能用數字索引。

 

HTMLCollection 對象的方法

item() 返回集合中指定位置的元素（節點）。
namedItem() 返回集合中 name 屬性或 id 屬性具有指定值的元素（節點）。

 

HTMLCollection 對象的屬性
cssRules 只讀屬性，返回指示列表長度的整數（即集合中的元素數）。