先引出一个问题：通过调用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. RHEL7服务管理

    对于学习过红帽RHEL6的系统或已经习惯使用service.chkconfig等命令来管理系统服务的用户可能要郁闷了, 因为在红帽RHEL7系统中管理服务的命令变成了“systemctl”,但使用方法 ...

  2. PowerDesigner-自定义生成WORD

    PowerDesigner-自定义生成WORD_旧梦重温 分类: web 2014-02-26 21:08 1563人阅读 评论(48) 收藏 举报   目录(?)[+] 1统一建立模型 2导出自定义 ...

  3. c# 浏览器区别

    c#   浏览器区别 思路:浏览器本身独有的属性来区别: 1.window对象的属性来区别: window.attachEvent               IEwindow.addEventLis ...

  4. python中的类简单讲解

    类似其它的语言, Python 中的函数使用小括号( () )调用.函数在调用之前必须先定义.如果函数中没有 return 语句, 就会自动返回 None 对象.      Python 是通过引用调 ...

  5. java 字符串函数

    string1.equals(string2) 比较字符串 substring()它有两种形式,第一种是:String substring(int startIndex)第二种是:String sub ...

  6. [HIHO1223]不等式（离散化，枚举）

    题目链接:http://hihocoder.com/problemset/problem/1223 这题不难,难点在于小数的处理.可以0.5为步长枚举,也可以扩大偶数倍枚举. /* ━━━━━┒ギリギ ...

  7. 《OD学HBase》20160821

    一.HBase性能调优 1. JVM内存调优 MemStore内存空间,设置合理大小 memstore.flush.size 刷写大小 134217728 = 128M memstore.mslab. ...

  8. 终于成功仿了一次Kalman滤波器

    终于成功仿了一次Kalman滤波器 首先是测试了从网上down的一段代码 % KALMANF - updates a system state vector estimate based upon a ...

  9. SQL注入与Java

    前面这篇文章介绍了SQL注入,并且主要就PHP的内容做了实验: http://www.cnblogs.com/charlesblc/p/5987951.html 还有这篇文章对处理方案做了介绍(Pre ...

  10. Spring MVC详细运行流程