<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> </head> <body> <input type="button" value="start-test" id="testBtn" /> <ol> <li> <h3>nextSibling</h3> <p id="test-1"></p> </li> <li> <h3>childNodes</h3> <p id="test-2"></p> </li> <li> <h3>children</h3> <p id="test-3"></p> </li> </ol> <div id="mydiv"></div> <script type="text/javascript"> function $(){ return document.getElementById(arguments[0]); }; for(var i=0; i<8000; i++){ var d = document.createElement('div'); d.innerHTML = '第一重div<p>第二重p<span>第三重span</span></p>'; $('mydiv').appendChild(d); } $('testBtn').onclick = startTest; function startTest(){ var time1 = new Date(); var tar = testNextSibling(); $('test-1').innerHTML = '耗时：' + (new Date() - time1) + '毫秒 ' + tar; var time2 = new Date(); var tar2 = testChildNodes(); $('test-2').innerHTML = '耗时：' + (new Date() - time2) + '毫秒 ' + tar2; var time3 = new Date(); var tar3 = testChildren(); $('test-3').innerHTML = '耗时：' + (new Date() - time3) + '毫秒 ' + tar3; } function testNextSibling(){ var el = $('mydiv'), ch = el.firstChild, name = ''; do { name = ch.nodeName; } while (ch = ch.nextSibling); return name; } function testChildNodes(){ var el = $('mydiv'), ch = el.childNodes, len = ch.length, name = ''; for(var count=0; count<len; count++){ name = ch[count].nodeName; } return name; } function testChildren(){ var el = $('mydiv'), ch = el.children, len = ch.length, name = ''; for(var count=0; count<len; count++){ name = ch[count].nodeName; } return name; } </script> </body> </html>
运行代码
原书中说：IE中nextSibling比childNodes表现优异。在IE6中，nextSibling快16倍，IE7中是105倍。
经测试后发现：IE7下：nextSibling要快一些，childNodes与childnren速度相当。IE6下：nextSibling与childNodes差别相当大，children稍快。FF下还是nextSibling快一点。
function testNextSibling(){
var el = $('mydiv'),
ch = el.firstChild,
name = '';
do {
name = ch.nodeName;
} while (ch = ch.nextSibling);
return name;
}
function testChildNodes(){
var el = $('mydiv'),
ch = el.childNodes,
len = ch.length,
name = '';
for(var count=0; count<len; count++){
name = ch[count].nodeName;
}
return name;
}
function testChildren(){
var el = $('mydiv'),
ch = el.children,
len = ch.length,
name = '';
for(var count=0; count<len; count++){
name = ch[count].nodeName;
}
return name;
}
正美：
