先引出一个问题：通过调用getElements*（）这样的方法返回来类（伪）数组，能对其本身的元素进行排序吗？

答案是不能，因为这些对象的都是NodeList 、 NamedNodeMap 或 HTMLCollection的实例。他们都是“动态的”。所谓动态就是每次调用实例上的方法，都会运行一次基于文档的查询。下面的代码会造成死循环

1 var oDivs = document.getElementsByTagName("div");

2 for (var i = 0; i < oDivs.length; i++) {

3     var newDiv = document.createElement("div");

4     document.body.appendChild(newDiv):

5 }

复制代码
上面的代码每次循环都会向文档中插入一个div元素，而循环的判断条件又是根据dom集合对象的length属性去判断。这样每执行一次循环length的值都会加1.

正是由于这种“动态”性，在不改变文档结构的前提下，是没有办法变更dom集合对象内部的元素位置的。如下面的操作是没有意义的

<body>

<div>hello</div>

<div>world</div>

</body>

</html>

<script type="text/javascript">

var oDivs = document.getElementsByTagName("div");

var temp = oDivs[0];

oDivs[0] = oDivs[1];

oDivs[1] = temp;

alert(oDivs[0].innerHTML); //显示 hello

</script>

也正式因为这种特性，在程序中应该尽量减少问对象的次数。可以考虑将对象中的值赋给临时变量，以提高程序的性能。

js中DOM集合的动态特性的更多相关文章

  1. js中DOM 节点的一些操作方法

    什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...

  2. 详解JS中DOM 元素的 attribute 和 property 属性

    一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...

  3. JS中DOM以及BOM

    一.bom对象 1screen对象 console.log(screen.width);// 屏幕宽度 console.log(screen.height);// 屏幕高度 console.log(s ...

  4. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  5. js中多层复杂并且动态键值JSON的获取方法

    开发中遇到了用js解析重新组装json数据的要求,关键点在于JSON中的串的键是动态的,多方查找解决了在此做个记录.同时我也深感js中循环的无赖,如果用i作为键会得到索引,用key作为循环变量竟然可以 ...

  6. 原生JS中DOM节点相关API合集

    节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...

  7. js中DOM事件探究

    事件 纲要 理解事件流 使用事件处理程序 不同的事件类型 javascript和html的交互是通过事件实现的.事件就是文档或浏览器窗口发生的一些特定交互瞬间.可以使用侦听器(事件处理程序)预定事件, ...

  8. 5月16日上课笔记-js中DOM操作

    一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文 ...

  9. JS中dom操作的事件

    Click--点击事件 优先级:dom.onclick 高于标签上的onClick属性 监听事件 --不会覆盖前面的事件效果 dom.addEventListener()    括号里面有三个参数 1 ...

随机推荐

  1. [iOS]集成环信SDK然后运行时候crash了-[NSBundle initWithURL:]: nil URL argument'

    Crash的reason是-[NSBundle initWithURL:]: nil URL argument' 1.首先我是用cocoapods导入的环信的SDK.然后怎么运行怎么crash. 2. ...

  2. SpringMVC + MyBatis 环境搭建（转）

    本文转自:http://blog.csdn.net/zoutongyuan/article/details/41379851 源码地址:https://github.com/starzou/quick ...

  3. swift：创建集合视图UICollectionView

    swift中创建集合视图和OC中差不多,主要是实现UICollectionViewDataSource数据源协议和UICollectionViewDelegateFlowLayout自定义布局协议,其 ...

  4. JBoss7配置指南

    JBoss7配置指南   1.    jboss各主要版本特性... 3 1.1.     jboss4特性... 3 1.2.     jboss5特性... 5 1.3.     jboss6特性 ...

  5. Oracle临时表（Temporary Table）

    GLOBAL TEMPORARY代表全局临时表临时表的元数据存储在数据字典里面 只当第一条DML命令发生的时候才为这张表的段分配空间 临时表数据的可见范围应该是会话级别或是事务级别的 会话或者事务级别 ...

  6. hdu1005 Number Sequence(数论)

    Number Sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tot ...

  7. dd命令刻录u盘启动盘

    dd命令来刻录windows启动盘 dd if=/ home/avi/Downloads/Win10_English_x64.iso of=/ dev/sdb1 bs=51M; sync dd命令详解 ...

  8. 路由器扫描的Java源码

    这个源码不是本人写的,是我原来的领导写的,我们都叫他东哥,这个是东留给我的一个小资源,好佩服他哦,这个东西可以用来扫描全世界的路由器,破解路由器账户和密码 当然是简单的了.我能力不够没有更完善的补充下 ...

  9. [原]Water Water Union-Find Set &amp; Min-Spanning Tree Problems&#39; Set~Orz【updating...】

    [HDU] 1213 - How Many Tables [基础并查集,求父节点个数] 1856 -More is better [基础并查集,注意内存,HDU数据水了,不用离散化,注意路径压缩的方式 ...

  10. 串口log

    使用windows自带的超级终端: 可从开机log开始保存: -----