DOM编程（每天有学习一点篇）

每次想到“DOM”编程就会自然联想到“性能瓶颈”。我觉得有两部分原因：

1.DOM自己本身操作代价昂贵，因为浏览器通常要求DOM 实现和JavaScript 实现保持相互独立；

2.嘿嘿，本人自身的原因，没有本质全面认识她，没有学习和思考如何高效运用其。

显而见之，我目前可以着手改进第二条呀。。。。

忘了哪位大牛说过的一句话，“轻轻地触摸DOM，并尽量保持在ECMAScript 范围内。”

具体做法：

first：DOM 访问和修改

who？   innerHTML or标准的DOM方法

使用DOM 方法更新页面内容的另一个途径是克隆已有DOM 元素

second：HTML集合（是用于存放DOM 节点引用的类数组对象）

document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName_r()

document.images

document.links

document.forms

document.forms[0].elements

HTML 集合是一个“虚拟存在，意味着当底层文档更新时，它们将自动更新”，HTML 集合实际上在查询文档，当你更新信息时，每次都要重复执行这种查询操作，正是低效率的来源。

--------方案

1.将length 缓存一下。

2.先将集合元素拷贝到数组（数组副本，评估是否有意），因为遍历数组比遍历集合快。

3.如果同一个DOM 属性或方法被访问一次以上，最好使用一个局部变量缓存此DOM 成员。

third：抓取DOM

1.用nextSibling 抓取DOM 是首选方法

2.DOM 属性诸如childNode，firstChild，和nextSibling 不区分元素节点和其他类型节点。

元素节点：children

3.函数querySelectorAll()接收一个CSS 选择器字符串参数并返回一个NodeList（由符合条件的节点构成的类数组对象）。此函数不返回
HTML 集合

列浏览器支持选择器API：Internet Explorer 8，Firefox 3.5，Safari 3.1，Chrome 1，Opera 10。

forth： 重绘和重排版

当浏览器下载完所有页面的html标记、javascript、css、图片之后，它解析文件并创建两个内部数据结构

a dom tree（表示页面结构）+ a render tree（表示dom节点如何显示）渲染树上的节点称为“框”或者“盒”。

获取布局信息的操作将导致刷新队列动作：

• offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop, scrollLeft, scrollWidth, scrollHeight
• clientTop, clientLeft, clientWidth, clientHeight
• getComputedStyle() (currentStyle in IE)（在IE 中此函数称为currentStyle）

该将多个DOM 和风格改变合并到一个批次中一次性执行：cssText 属性实现、修改CSS 的类名称

firth：批量修改DOM
1.从文档流中摘除该元素---》对其应用多重改变----》将元素带回文档中

1.1隐藏元素，进行修改，然后再显示它。

1.2使用一个文档片断在已存DOM 之外创建一个子树，然后将它拷贝到文档中。

1.3将原始元素拷贝到一个脱离文档的节点中，修改副本，然后覆盖原始元素。

sixth：事件托管

事件逐层冒泡总能被父元素捕获。采用事件托管技术之后，你只需要在一个包装元素上挂接一个句柄，用于处理子元素发生的所有事件。