【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的标记里只有一个值为This is my content.

元素节点div

This is my content.

window.onload=function(){
    var testdiv=document.getElementById('testdiv');
    alert(testdiv.innerHTML);   //读取
}

结果:弹出窗口 ie6下是This is my content. //大写标签

火狐和chrome下是This is my content.

解析：很明显，innerHTML属性无细节可言。要想获得细节，就必须使用DOM方法和属性。

innerHTML既支持读取，又支持写入。

window.onload=function(){
	var testdiv=document.getElementById('testdiv');
	testdiv.innerHTML='<p>I inserted <em>this</em> content.</p>';   //写入
}

　　在任何时候，标准的DOM都可以用来替代innerHTML.虽说这往往需要多编写一些代码菜能获得同样的效果，但DOM同时也提供了更高的精确性和更强大的功能。