测试开发技术:DOM中 innerHTML、innerText、outerHTML、outerText的区别
测试开发技术: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">>div<替换后>/div<</div>
4.outerText
运行脚本:
<script type="text/javascript" lang="javascript">
document.getElementById('test').outerText= "<div>替换后</div>";
</script>
原html变为:
>div<替换后>/div<
不做实验不会明白什么意思,innerHTML和outHTML都是会将HTML标签一起读取或设置,但innerText和outerText在读取的时候会去掉HTML标签,设置的时候如果字符中包含HTML标签,将会作为特殊字符做替换处理。这就是这几个家伙的真正区别。
测试开发技术:DOM中 innerHTML、innerText、outerHTML、outerText的区别的更多相关文章
- js 中innerHTML,innerText,outerHTML,outerText的区别
开头说下innerText和outerText只在chrome浏览器中有效 定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML,包括标签. 来看代码 <!DOC ...
- javaScript中innerHTML,innerText,outerHTML,outerText的区别
开头说下innerText和outerText只在chrome浏览器中有效 定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML,包括标签. 来看代码 <!DOC ...
- innerHTML, innerText, outerHTML, outerText的区别
innerHTML:返回标签内部嵌套的子元素的所有html标签+文本内容content. innerText:返回标签内部嵌套的子元素的文本内容content. outerHTML:返回标签本身+嵌套 ...
- JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?jQuery中的text()、html()和val()
一.JS中innerHTML.outerHTML.innerText .outerText.value的区别与联系?jS中设置或者获取所选内容的值:①innerHTML :属性设置或返回该标签内的HT ...
- innerHTML、outerHTML、innerText、outerText的区别及兼容性问题
今天看了很多文章关于innerHTML.outerHTML.innerText.outerText的区别,都是很模糊的一个介绍,所以自己总结下这些区别以及一些重点内容.很多文章在描述这些区别的时候,都 ...
- 《Python测试开发技术栈—巴哥职场进化记》—前言
写在前面 今年从4月份开始写一本讲Python测试开发技术栈的书,主要有两个目的,第一是将自己掌握的一些内容分享给大家,第二是希望自己能系统的梳理和学习Python相关的技术栈.当时我本来打算以故事体 ...
- 《Python测试开发技术栈—巴哥职场进化记》—初来乍到,请多关照
上文<巴哥职场进化记-Python测试开发技术栈>开篇讲到巴哥毕业初到深圳,见到了来自五湖四海的室友.一番畅聊之后,抱着对未来职场生活的期待,大家都进入了梦乡.今天我们来看看巴哥第一天上班 ...
- 《Python测试开发技术栈—巴哥职场进化记》—软件测试工程师“兵器库”
上文<Python测试开发技术栈-巴哥职场进化记>-初来乍到,请多关照 我们介绍了巴哥入职后见到了自己的导师华哥,第一次参加团队站会,认识了团队中的开发小哥哥和产品小姐姐以及吃到了公司的加 ...
- 《Python 测试开发技术栈—巴哥职场进化记》—每日站会的意义
上文<Python测试开发技术栈-巴哥职场进化记>-一道作业题我们讲到华哥给巴哥出了一道作业题,让巴哥用Python实现记录日志的功能,巴哥历经"千辛万苦",终于做出了 ...
随机推荐
- HBase介绍
欢迎和大家交流技术相关问题:邮箱: jiangxinnju@163.com博客园地址: http://www.cnblogs.com/jiangxinnjuGitHub地址: https://gith ...
- BZOJ 1898: [Zjoi2004]Swamp 沼泽鳄鱼(矩阵乘法)
可以发现,如果没有鳄鱼,那么就是裸地一道题,但是可以发现鳄鱼最多每12次重复,那么就少于12的那部分dp,其他的就矩阵乘法就行了 PS:第一次吧矩阵乘法AC了好开心QAQ CODE: #include ...
- iOS开发——设计模式那点事
单例模式(Singleton) 概念:整个应用或系统只能有该类的一个实例 在iOS开发我们经常碰到只需要某类一个实例的情况,最常见的莫过于对硬件参数的访问类,比如UIAccelerometer.这个类 ...
- Javascript中关于作用域和闭包和域解释的面试题
<script type="text/javascript"> function fn() { var i = 10; return function (n) { co ...
- 根据WaitType诊断故障
在查询执行时,等待次数和等待时间在一定程度上指示查询的瓶颈,甚至非常有助于对系统进行诊断.偶尔一次的异常等待,不足以表明系统存在瓶颈,但是,SQL Server实例经常出现特定的等待类型,并且等待时间 ...
- MyBatis的类型自定义映射
背景 利用MyBatis将数据库的时间类型映射成Java8的时间类型,引申对不同类型的自定义映射 实现方法 1.实现MyBatis中TypeHandler接口 @MappedTypes(value = ...
- Ceph osd启动报错osd init failed (36) File name too long
在Ceph的osd节点上,启动osd进程失败,查看其日志/var/log/ceph/ceph-osd.{osd-index}.log日志,报错如下: 2017-02-14 16:26:13.55853 ...
- ASP查询数据RS转换成COMMAND
RS版本: IF(troubleCatalog="1" or troubleCatalog="2" or troubleCatalog="3" ...
- 1592: [Usaco2008 Feb]Making the Grade 路面修整
1592: [Usaco2008 Feb]Making the Grade 路面修整 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 428 Solv ...
- swift -- 构造/析构函数
一.构造函数 //当一个类实例化一个对象时候,第一个调用的方法 class Student { //属性 var name = "ser" let age : Int //1.重 ...