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 只读属性，返回指示列表长度的整数（即集合中的元素数）。

 

转载于:https://www.cnblogs.com/chengduxiaoc/p/6551195.html