【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同时也提供了更高的精确性和更强大的功能。

 

posted @ 2014-04-14 21:42  Western Journey  阅读(241)  评论(0编辑  收藏  举报