第三章　2011-12-21
1，访问DOM的次数越多，代码运行速度越慢。减少访问DOM的次数，把运算尽量留在ECMAScript这一端处理。
2，使用数组来合并大量字符串，会让innerHTML效率更高。
3，循环一个HTML集合比循环一个数组效率要低很多。
var toArray(coll){ for(var i=0,a=[],len=coll.length;i<len;i++){ a[i] = coll[i]; } return a; }
此函数把一个HTML集合转换为一个普通数组
以前我经常犯的一个错误
var a = document.getElementsByTagName('div'); for(var i=0;i<a.length;i++){ //do something }
正确写法应该是
var a = document.getElementsByTagName('div'); for(var i=0,len=a.length;i<len;i++){ //do something }

元素节点

子节点　childNodes => children
子节点长度　childNodes.lenght => childElementCount
第一个子节点　firstChild => firstElementChild
最后一个子节点　lastChild => lastElementChild
下一个子节点　nextSibling => nextElementSibling
前一个子节点　previousSibling => previousElementSibling
注：前者为IE6、7、8支持，后者为FF,safari,chrome,opera支持

选择器API
document.querySelectorAll('#id .class tagname')
使用CSS选择器，效率比document.getElementsByTagName()要快，且该方法返回的不是一个HTML集合
document.querySelector('#id .class tagname')
返回第一个匹配的节点
注：目前有IE8,FF,safari,chrome,opera支持此选择器API

批量修改DOM尽量减少浏览器的重绘和重排
推荐方法是创建并更新一个文档片断，然后把它附加到原始列表中，如：
var fragment = document.creatDocumentFragment; fragment.appendChild('...'); document.getElementByID('test').appendChild(fragment);
监听冒泡
document.getElementByID('menu').onclick = function(e){ //浏览器target e = e || window.event; var target = e.target || e.srcElement; if(target.nodeName !== 'A'){ return; } //do something //浏览器组织默认行为并取消冒泡 if(typeof e.preventDefault === 'function'){ e.preventDefault(); e.stopPropagation(); } else{ e.returnValue = false; e.cancelBubble = true; } }