首页 > Web开发 > 详细

测试开发技术:DOM中 innerHTML、innerText、outerHTML、outerText的区别

时间:2015-11-26 18:44:01      阅读:285      评论:0      收藏:0      [点我收藏+]

   

      我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHTML、innerText、outerHTML、outerText的区别,这样才能更好的处理web,进行自动化测试

 

innerHTML 设置或获取位于对象起始和结束标签内的 HTML 
outerHTML 设置或获取对象及其内容的 HTML 形式 
innerText 设置或获取位于对象起始和结束标签内的文本 
outerText 设置(包括标签)或获取(不包括标签)对象的文本

没有例子,你明白什么意思吗,反正我没明白,下面我们举例来说吧:
如:
原html为:
<div id="test"><span>替换前</span></div>

1.innerHTML
运行脚本:
<script type="text/javascript" lang="javascript">
document.getElementById(‘test‘).innerHTML = "<div>替换后</div>";
</script>

原来的html变为:
<div id="test"><div>替换后</div></div>

2.outerHTML
运行脚本:
<script type="text/javascript" lang="javascript">
document.getElementById(‘test‘).outerHTML = "<div>替换后</div>";
</script>

原html变为:
<div>替换后</div>


3.innerText
运行脚本:

<script type="text/javascript" lang="javascript">
document.getElementById(‘test‘).innerText= "<div>替换后</div>"; 
</script>

原html变为:
<div id="test">&gt;div&lt;替换后&gt;/div&lt;</div>


4.outerText
运行脚本:
<script type="text/javascript" lang="javascript">
document.getElementById(‘test‘).outerText= "<div>替换后</div>"; 
</script>
原html变为:
&gt;div&lt;替换后&gt;/div&lt;



不做实验不会明白什么意思,innerHTML和outHTML都是会将HTML标签一起读取或设置,但innerText和outerText在读取的时候会去掉HTML标签,设置的时候如果字符中包含HTML标签,将会作为特殊字符做替换处理。这就是这几个家伙的真正区别。

测试开发技术:DOM中 innerHTML、innerText、outerHTML、outerText的区别

原文:http://www.cnblogs.com/poptest/p/4998350.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!