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

 

我们在做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标签,将会作为特殊字符做替换处理。这就是这几个家伙的真正区别。

最新文章

  1. java基础知识(一)数据类型(下)
  2. Container With Most Water -- LeetCode 11
  3. C# windows form如何隐藏窗口?
  4. 【五子棋AI循序渐进】——整合完成
  5. Mac 下配置 SSH 免密码安全登录
  6. linux 常见操作命令
  7. android softinput 相关
  8. String 和 StringBuffer的区别
  9. 【C#学习笔记】类型转换
  10. WCF学习笔记 -- 如何用C#开发一个WebService
  11. Android(java)学习笔记139:在TextView组件中利用Html插入文字或图片
  12. 使用xshell出现乱码
  13. 精益创业之父Steve Blank: 怎样让企业内部创新获得50倍增速
  14. 公司内部SQUID代理HTTPS访问资料网站
  15. address_space 从哪里来
  16. 去掉svn与文件之间 的关联
  17. ubuntu下mysql二进制包安装
  18. Python中的turtle初探
  19. 数据库分片(Database Sharding)详解
  20. offset系列、scroll系列与client系列

热门文章

  1. php分页查询
  2. 【2017年新篇章】 .NET 面试题汇总(二)
  3. jeesite简单入口分析
  4. CSS1,CSS2选择器详解
  5. scss 学习笔记
  6. 第21篇 js四种继承方式
  7. lxd容器之GPU发现和加载
  8. centOS7 mini配置linux服务器(一)安装centOs7
  9. JAVA学习之动态代理
  10. 基于vue的多引擎搜索及关键字提示