首页 > 代码库 > 一下子游篇学习之DOM编程

一下子游篇学习之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:事件托管

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

 

一下子游篇学习之DOM编程