zoukankan      html  css  js  c++  java
  • 测试开发技术: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">&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标签,将会作为特殊字符做替换处理。这就是这几个家伙的真正区别。

  • 相关阅读:
    IT人士必去的10个网站
    c++怎样让函数返回数组
    vs中“Stack around the variable was corrupted”的解决方案
    c++ eof()函数
    bat开发小工具以及使用
    Python接口自动化(一)---json数据类型取值
    MAVEN编译错误解决:maven only whitespace content allowed before start
    shell常用命令总结总结
    shell打包和解压
    java总结笔记
  • 原文地址:https://www.cnblogs.com/poptest/p/4998350.html
Copyright © 2011-2022 走看看