先引出一个问题：通过调用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. Ubuntu安装取色软件

    sudo apt-get install Gpick

  2. hive0.13网络接口安装

    安装好hive 0.13以后,在./lib下找不到hive-hwi-0.13.1.war   ,那该怎么办? 1.下载hive-0.12.0版本,把这一版里面的hive-hwi-0.12.0.war重 ...

  3. 关于MySQL

    DBMS - 数据库管理系统(Database Management System) RDBMS - 关系数据库管理系统(Relational Database Management System) ...

  4. linux系统的 suid/guid简单介绍 linux suid guid

    我们在前面曾经提到过s u i d和g u i d.这种权限位近年来成为一个棘手的问题.很多系统供应商不允许实现这一位,或者即使它被置位,也完全忽略它的存在,因为它会带来安全性风险.那么人们为何如此大 ...

  5. Couchbase 找回登录密码

    在项目里,我们使用Couchbase当做缓存层,效果非常好,支持集群与数据监测,可悲的有一次我新建了一个服务器,安装完成Couchbase之后,密码忘了! 怎么也想不起来,Couchbase又没有提供 ...

  6. 嵌入式linux内核是什么？

    linux内核是一种可以被内核动态加载(insmode)和卸载(rmmod)的可执行二进制代码 最简单的内核 #include <linux/module.h> #include < ...

  7. 戏（细）说Executor框架线程池任务执行全过程（上）

    一.前言 1.5后引入的Executor框架的最大优点是把任务的提交和执行解耦.要执行任务的人只需把Task描述清楚,然后提交即可.这个Task是怎么被执行的,被谁执行的,什么时候执行的,提交的人就不 ...

  8. Maven之 环境搭建

    这几天开始了maven的学习,看了孔浩老师的视频(http://pan.baidu.com/s/1o7bg2h0),以及黄勇大牛的博客(http://my.oschina.net/huangyong/ ...

  9. IOS中UIWebView执行javaScript脚本时注意点

    1.webView之所以能够滚动,因为它内部有一个UIScrollView子控件 2.移除webView顶部和底部灰色的一层view * 遍历webView中scrollView内部的所有子控件 * ...

  10. 修改Android系统字号（一）

    /*********************************************************************** * 修改Android系统字号(一) * 说明: * ...