标签：
第三章DOM Script DOM编程 读书笔记
访问和修改DOM元素
浏览器通常要求DOM实现和JavaScript保持相互独立。
<!-- 例如IE中，被称为JScript的JavaScript实现位于库文件jscript.dll中，而DOM实现位于另一个库mshtml.dll(内
部代号Trident).这种分离技术允许其他技术和语言，
如VBScript,受益于Trident所提供的DOM功能和渲染功能。
Safari使用Webkit的WebCore处理DOM和渲染，具有一个分离的JavaScriptCore引擎。
Google Chrome也使用Webkit的WebCore库渲染页面，但实现了自己的JavaScript引擎V8.
在Firefox中，JavaScript实现了TraceMonkey，与其Gwcko渲染引擎相分离。-->
访问DOM元素
function innerHTMLLoop(){
for(var count=0; count<15000; count++){
document.getElementById("h").innerHTML+="a";
}
}
每次循环单元中，都对DOM元素访问两次，一次次读innerHTML属性,一次写。
使用局部变量存储更新后的内容，在循环结束时一次性写入:
function innerHTMLLoop(){ var content=" "; for(var count=0; count<15000; count++){ content+="a"; } document.getElementById("h").innerHTML+="content"; }
在所有浏览器中，新版本运行速度都要快得多。
结论:访问DOM越多，代码的执行速度就越慢。
“轻轻的触摸DOM”,尽量保持在ECMAScript范围内。
比较innerHTML和纯DOM,例如createElement()
两种方式创建一个1000行的表
1.构造一个HTML字符串，然后更新DOM的innerHTML属性。
2.通过标准DOM方法document.createElement() document.createTextNode()。
innerHTML的好处在老式浏览器上显而易见，新浏览器就不那么明显。
使用DOM方法反之。
如果在一个性能苛刻的操作中更新大一块HTML页面，innerHTML在大多数浏览器中执行更快。
但对于大多数日常操作而言，其差异并不大，所以应当根据代码可读性，可维护性，团队习惯，代码风格来综合决定采
用哪种方法。
节点克隆
使用DOM方法更新页面内容的另一个途径是克隆已有DOM元素，而不是创建新的。
即 使用element.cloneNode() （element是一个已存在的节点）代替document.createElement();
在大多数浏览器上，克隆节点更有效率，但提高不太多。用克隆节点的方法重新生成前面例子中的表，
单元只创建执行复制操作，这样只是稍微快了一点。
HTML集合
是用于存放DOM节点引用的类数组对象。下列函数的返回值就是一个集合：
document.getElementByName()
document.getElementByClassName()
document.getElementByTagName()
document.images 页面中所有的<img>元素
document.links 所有的<a>元素
document.forms 所有表单
document.forms[0].elements 页面中的第一个表单的所有字段
这些方法和属性返回HTMLCollection对象 ,是一种类似数组的列表。他们不是数组(因为他们没有诸如push（）和
slice()之类的方法，但是提供料一个length属性)
HTML集合实际上查询文档，当你更新信息，每次都要重复执行这种查询这种操作。例如读取集合中元素的数目(也就是
集合的length)。这正是低效率的来源。
遍历数组明显快于相同大小和内容的HTML集合，可以将集合拷贝到数组arr中。
每次迭代过程访问集合的length属性，导致集合器更细，在所有浏览器都会产生明显的性能损失。
优化:将集合的length属性那个缓存到一个变量中，然后循环判断条件中使用这个变量。
对于 任何类型的DOM 访问，如果同一个DOM属性或方法被访问一次以上，最好使用一个局部变量缓存此DOM成员。
当遍历一个集合时，第一个优化是将集合引用存储于局部变量，并在循环之外缓存length属性，然后，如果在循环体中
多次访问同一个集合元素，那么使用局部变量缓存它。
在使用DOM API时，通常要使用针对特定操作选择最有效的API.
例如 操作周围的元素，或者递归迭代所有的子节点，你可以使用childNode集合，或者使用nextsibling获得每个元素
的兄弟节点。
DOM属性诸如childNode， firstChild， nextSibling不区分元素节点和其他类型的节点，如注释节点和文本节点，
通常只有元素节点需要被访问，所以在循环中，似乎应当对节点返回类型进行检查，过滤出非元素节点，这些检查和过
滤都是不必要的DOM操作。
只返回元素节点 所有类型的节点
children childNodes
childElementCount childNodes.length
firstElementChild firstChild
lastElementChild lastChild
nextElementChild nextSibling
previousElementSibling previousSibling
以上支持 FF3.5 Safari 4 chrome2 opera9.62
IE6,7,8只支持children
遍历children比childNodes更快，集合项更少。
也可以用CSS选择器
var elements=document.querySelectorAll("#menu a");
返回的是NodeList 符合条件的类数组对象，不返回HTML集合
相同的方式，
var element=document.getElementById("menu").getElementsByTagName("a");
这element将是一个html集合，将它拷贝到一个数组中，如果想得到querySelectorAll()同样的返回值类型的话
querySelectorAll还可以用于联合查询
var errs=document.querySelectorAll("div.warning,div.notice");
可以一次性获得这两类节点
querySelector() 返回符合查询条件的第一个节点
标签：
原文地址：http://www.cnblogs.com/xxza/p/4696389.html
