第三章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() 返回符合查询条件的第一个节点