1. 遍历DOM
当遍历父节点下面的所有子节点时,例如:
<div id="parent">
<li>1</li>
<li>2</li>
9000个
<li>9003</li>
</div>
var div=document.getElementById("div");
1) nextSibling方法
var f=div.firstChild;
var name='';
do{
name=div.nodeName;
}while(f=f.nextSibling)
2) childNodes
var li_arr=div.childNodes;
for(var i=0, len=arr.length; i<len; i++){
name=li_arr[i].nodeName;
}
两种方法的运行时间几乎相等,但是在IE中nextSibling比childNodes快很多,IE6中快16倍,IE7中快105倍。推荐使用第一种方法。
2. 元素节点
childNodes、nextSibling等都包含空格或者换行符之类,因此是使用时会增加一些不必要的操作。在实际使用时可以用children代替childNodes,nextElementSibling代替nextSibling,以此类推。
3. 选择器API
jQuery中提供了CSS选择器,进行DOM操作,最新的浏览器也提供了一个名叫querySeletorAll()的原生DOM方法,这种方法比使用js和dom来遍历查找元素快很多。例如:
var li_arr=document.querySeletorAll("#div li");
该方法不会返回HTML集合,因此返回的节点不会对应实时的文档结构。