先引出一个问题：通过调用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. Knight's Trip---hdu3766（马走日求最小走的步数）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3766 给你一个x ,y 求出从(0,0)位置到达需要的最小步数每次只能走日型: 下图为暴力bfs得到的 ...

  2. Ubuntu 升级内核

    1. 升级下 sudo apt-get update && sudo apt-get dist-upgrade && sudo apt-get autoremove 2 ...

  3. 预编译头文件 StdAfx.h

    预编译头文件: 最常见的使用场景就是 StdAfx.h 文件,在这个文件中包含常用的头文件,比如windows.h,cstdio,string,别的 .cpp 文件去包含 StdAfx.h 头文件.编 ...

  4. CentOS查看系统信息命令和方法

    收集整理的一些linux查看系统信息的命令和方法: 一.linux查看服务器系统信息的方法: 1.查看主机名/内核版本/CPU构架: # uname -n -r -p -o localhost.loc ...

  5. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  6. linux select

    man select: #include <sys/select.h> #include <sys/time.h> int select(int nfds, fd_set *r ...

  7. spry菜单栏(二)

    自定义选项卡式面板构件 尽管使用属性检查器可以简化对选项卡式面板构件的编辑,但是属性检查器并不支持自定义的样式设置任务.您可以修改选项卡式面板构件的 CSS 规则,并创建根据自己的喜好设置样式的构件. ...

  8. Back to Back Order Process

    Steps involved involved in back to back order process in oracle apps 1. Enter Sales Order 2. Book Sa ...

  9. Cookie操作类 实现记住用户名和密码的功能

    import java.util.Hashtable;import java.util.Iterator;import java.util.Set;import javax.servlet.http. ...

  10. 宏ut_mem_block_t

    /** This struct is placed first in every allocated memory block */ typedef struct ut_mem_block_struc ...