您的位置：首页 > Web前端 > HTML

【DOM编程艺术】DOM角度以及innerHTML角度看待testdiv内的标记

2014-04-14 21:42 260 查看 
<!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同时也提供了更高的精确性和更强大的功能。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航