测试开发技术:DOM中 innerHTML、innerText、outerHTML、outerText的区别
2015-11-26 17:11
302 查看
测试开发技术: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标签,将会作为特殊字符做替换处理。这就是这几个家伙的真正区别。
相关文章推荐
- html效果
- Sublime text如何设置快捷键让编写的HTML文件在浏览器预览?
- 模拟迁途.html
- WEB笔记-1、HTML 标记与文档结构
- Selenium Webdriver元素定位的方式
- JFinal 访问指定url时,默认访问该url下的index.html
- HTML中小meta的大作用
- html中 disabled readonly
- 转: HTML的电子邮件链接标签mailto用法详解
- html的书写规范,有哪些注意点
- 拨打电话tel: 跳转到邮件mailto:(html)
- 遇到在html中取值时,值为null的问题
- HTML特殊符号对照表
- 【snippet HTML】持续更新
- HTML标签属性<meta>、<body>
- HTML排版标记
- HTML<div><span>字符实体
- html 界面 添加 百度地图
- Html自动播放音乐代码
- HTML网页截图工具开发包CutyCapt简介