先引出一个问题：通过调用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. 298. Binary Tree Longest Consecutive Sequence

    题目: Given a binary tree, find the length of the longest consecutive sequence path. The path refers t ...

  2. CentOS进程资源占用高原因分析命令

    1.查看进程的线程:ps -eLf|egrep 'gateserver|UID' 2.跟踪线程调用: strace  -p 15530 3.统计线程中函数的调用小号CPU时间:strace  -p 1 ...

  3. hive-0.12升级成hive 0.13.1

    安装了0.12之后,听说0.13.1有许多新的特性,包括永久函数,所以想更新成0.13版的(元数据放在mysql中) 2014年8月5日实验成功 hive0.13.1的新特性 新特性详见 http:/ ...

  4. jdbc框架 commons-dbutils的使用

    commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化jdbc编码的工作量,同时也不会影响程序 ...

  5. POJ -3050 Hopscotch

    http://poj.org/problem?id=3050 给定一个5×5矩阵,问选6个数的不同排列总数是多少! 二维的搜索,注意要判重,数据量很小,直接用map就好. #include<cs ...

  6. asp数据链接

    asp页面的中的数据库连接要进行唯一名称处理,不然页面中多个连接使用时,会出现连接莫名关闭.数据不能写入,但是页面也没报错.asp可以将有数据库连接的地方,提取成单独的函数.在每个方法单独命名数据库连 ...

  7. asp天猫自主发码的请求

    这几天在做天猫自主发码.实现了通知和核销部门.其他的部分待后续实现. 值得注意的是consume回调中,要加入sign_method=md5

  8. 使用@RequestParam绑定请求参数到方法参数

    @RequestParam注解用于在控制器中绑定请求参数到方法参数.用法如下:@RequestMapping public void advancedSearch(   @RequestParam(& ...

  9. spring mvc 自定义转换器

    <!-- 注册转化器 --> <mvc:annotation-driven conversion-service="conversionService" /> ...

  10. 瞎折腾之Mvc WebApi的使用以及跨域问题

    在公司经常会用到调用接口的情况,但是一直是用的webservice,我感觉真是太笨重了.虽然某些人感觉用的很爽.非常爽.比如说:公司在开发的时候需要对接另一组的接口,然后就只能是指定端口和ip到他的电 ...