c标签遍历html 取下标值,HTMLCollection 对象详解，以及为什么循环获取的dom合集操作可能会出现下标不正确的情况？...

有时候循环dom合集，然后操作其中的某些dom之后，发现下标不正确了

比如我们要删除一个dom合集的时候：

var selectDom = document.getElementsByClassName("active");

for(var i=0; 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

newArr.push(selectDom[i]);

}

for(var i=0; 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只读属性，返回指示列表长度的整数(即集合中的元素数)。

js对象详解(JavaScript对象深度剖析，深度理解js对象)

js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

mvc-servlet---ServletConfig与ServletContext对象详解(转载)

ServletConfig与ServletContext对象详解 一.ServletConfig对象    在Servlet的配置文件中,可以使用一个或多个标签为s ...

JavaWeb学习----JSP内置对象详解

[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

django中request对象详解(转载)

django中的request对象详解 Request 我们知道当URLconf文件匹配到用户输入的路径后,会调用对应的view函数,并将  HttpRequest对象  作为第一个参数传入该函数. ...

dom对象详解--document对象(一)

document对象 Document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在. Document对象是window对象的一 ...

Vuejs vm对象详解

Vuejs vm对象详解 vue数据是怎么驱动视图的?一堆数据放在那里是不会有任何作用的,它必须通过我们的View Model(视图模型)才能操控视图. 图中的model其实就是数据,一般我们写成js ...

jQuery的deferred对象详解

jQuery的deferred对象详解请猛击下面的链接 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...

随机推荐

java 命令notes

jps:查看本机的Java中进程信息. jstack:打印线程的栈信息,制作线程Dump. jmap:打印内存映射,制作堆Dump. jstat:性能监控工具. jhat:内存分析工具. jconso ...

在ANSYS WORKBENCH中使用APDL命令的例子

如何在workbench中使用command? 如何在ansys workbench中插入apdl? 如何在ansys workbench中使用复杂载荷? 答案在APDL,他可以实现函数化的载荷,如岁 ...

AngularJS的小知识点

小知识点:$scope和$rootScope (1)每次使用ngController指令,都会调用控制器的创建函数,创建出一个控制器对象. (2)每次创建一个控制器对象,AngularJS都会创建一个 ...

CSS3实现32种基本图形

CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...

C++学习基础七——深复制与浅复制

一.深复制与浅复制基本知识 深复制和浅复制,又称为深拷贝和浅拷贝. 深复制和浅复制的区别如下图1所示: 图1 图1表示的是,定义一个类CDemo,包含int a和char *str两个成员变量, 当深 ...

Pro ASP.NET MVC –第六章 MVC的基本工具

在本章,我们将介绍每个MVC程序员"武器库"的三个重要工具:依赖注入容器.单元测试框架和mock工具.在本书,对于三个工具分别都只用了一种方式实现,但每个工具都还有其他的实现方式. ...

92. Reverse Linked List II

题目: Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1- ...

关于jQuery.click()函数

最近接手了前同事的项目,关于使用线程控制实现代码热插拔功能! 在线程中,使用了ChatWebSocketHandler,与前台进行实时交互,今天我拿到需求是这样的,结合chatWebSocketHan ...

java 学习笔记2 面向对象(上)

类和对象 类是某一批对象的抽象,可以把类理解成某种概念.对象是一个具体存在的实体.类和对象是面向对象的核心. 类定义的是多个实例的特征,类不是具体存在,实例才是具体存在. 定义类(class)的语法: ...

基于模型的特征选择详解 (Embedded & Wrapper)

目录 基于模型的特征选择详解 (Embedded & Wrapper) 1. 线性模型和正则化(Embedded方式) 2. 基于树模型的特征选择(Embedded方式) 3. 顶层特征选择算 ...