先引出一个问题：通过调用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. Mysql Workbench 学习

    1.安装 http://dev.mysql.com/downloads/tools/workbench/ 选择合适的,下载(以Ubuntu 为例) cd到下载目录,然后sudo dpkg -i wor ...

  2. [AFN]AFNetworking错误总结

    1. 错误打印  code=-1016 filed: text/html 错误原因:AFN默认不能解析请求回来的text/html数据 解决办法: AFN3.0的请看这里 AFHTTPSessionM ...

  3. linux查看内存

    cat /proc/meminfo 查看内存,查看最为准确. cat /proc/cpuinfo  察看CPU情况. dmesg | less   这样也可以看到,不过带太多的其他信息了. top也可 ...

  4. Java：字符串缓冲区StringBuffer和StringBuilder的使用

    StringBuffer特点: 1.是字符缓冲区,一个容器(不论缓冲区内容怎么变化,StringBuffer这个容器对象都不会改变) 2.是可变长度的 3.可以直接操作多个数据类型 4.最终会通过to ...

  5. POJ1019——Number Sequence(大数处理)

    Number Sequence DescriptionA single positive integer i is given. Write a program to find the digit l ...

  6. 机器学习 —— 概率图模型（Homework: CRF Learning）

    概率图模型的作业越往后变得越来越有趣了.当然,难度也是指数级别的上涨啊,以至于我用了两个周末才完成秋名山神秘车牌的寻找,啊不,CRF模型的训练. 条件随机场是一种强大的PGM,其可以对各种特征进行建模 ...

  7. opencv 人脸识别 （二）训练和识别

    上一篇中我们对训练数据做了一些预处理,检测出人脸并保存在\pic\color\x文件夹下(x=1,2,3,...类别号),本文做训练和识别.为了识别,首先将人脸训练数据 转为灰度.对齐.归一化,再放入 ...

  8. 15.导入网表及status介绍[原创]

    一.导入网表 在导入网表之前你的封装需确认是在你的封装路径下 建立Board工程后: ① ② ③ ④放置器件 ⑤ (切记,封装路径一定要添加) 二.status介绍 --- (常用) -------- ...

  9. D:/apache2/conf/httpd.conf:Cannot load D:/apache2/modules/mod_actions.so

    报错如下: errors reported here must be corrected before service can be started.httpd:Syntax error on lin ...

  10. System.Linq.Dynamic 和Nhibernate

    var session = NHibernateSessionManager.Instance.GetSession(); "); var staffList = session.Query ...