【DOM编程艺术】DOM角度以及innerHTML角度看待testdiv内的标记
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>document.write</title> </head> <body> <script type="text/javascript"> document.write("<p>This is inserted</p>"); </script> <div id='testdiv'> <p>This is <em>my</em> content.</p> </div> </body> </html>
用DOM的眼睛看testdiv内的标记，如下所示：
元素节点 div
属性节点id='testdiv' 元素节点p
文本节点This is 元素节点em 文本节点content.
文本节点my
从innerHTML属性的角度来看则简单的多。就innerHTML属性来说，id为testdiv的标记里只有一个值为<p>This is <em>my</em> content.</p>
元素节点div
<p>This is <em>my</em> content.</p>
window.onload=function(){
var testdiv=document.getElementById('testdiv');
alert(testdiv.innerHTML); //读取
}
结果:弹出窗口 ie6下是<P>This is <EM>my</EM> content.</P> //大写标签
火狐和chrome下是<p>This is <em>my</em> content.</p>
解析： 很明显，innerHTML属性无细节可言。要想获得细节，就必须使用DOM方法和属性。
innerHTML既支持读取，又支持写入。
window.onload=function(){
var testdiv=document.getElementById('testdiv');
testdiv.innerHTML='<p>I inserted <em>this</em> content.</p>'; //写入
}
在任何时候，标准的DOM都可以用来替代innerHTML.虽说这往往需要多编写一些代码菜能获得同样的效果，但DOM同时也提供了更高的精确性和更强大的功能。
