JS技术

innerText与innerHTML,outerText与outerHTML

字号+ 作者: 来源: 2014-11-16 22:20 我要评论( )

innerText与innerHTML,outerText与outerHTML

      (一)innerText和innerHTML
      尽管DOM带来了动态修改文档的能力,但对微软的开发人员来说,还不够。所以IE为所有的元素引入两个特性,以更方便的进行文档操作,这两个特性是innderText和innerHTML。
      其中,innerText特性用来修改起始标签和结束标签之间的文本。例如,假设有个空的<div/>元素,希望将其变成<div>文本内容<div/>。用DOM实现时,要这么做:
      oDiv.appednChild(document.createTextNode(“文本内容”));
      这段代码并不难读,但是很冗长。如果使用innerText,只需要要这么做:
      oDiv.innerText=”文本内容”;
      使用innerText,代码更简洁,且容易理解。另外,innerText会自动将小于号、大于号、引号和&符号进行HTML编码,所以丝毫不需要担心这些特殊字符:
      oDiv.innerText=”文本内容<div/>.”;
      这一行代码的结果是:<div/>文本内容&lt;div/&lgt;.</div>。但如何一定要在元素中包含HTML标签呢?

      应用innerHTML特性,可以直接给元素分配HTML字符串,而不需要考虑使用DOM方法来创建元素。例如,假设一个空<div/>要变成<div><strong>Hello</strong> <em>World</em></div>。使用DOM,要用下面代码:
      var oStrong=document.createElement(“strong”);
      oStrong.appendChild(document.createTextNode(“Hello”));
      var oEm=document.createElement(“em”);
      oEm.appendChild(document.createTextNode(“World”));
      oDiv.appendChild(oStrong);
      oDiv.appendChild(document.createTextNode(“”));
      oDiv.appendChild(oEm);
      而使用innerHTML,代码就变成:
      oDiv.innerHTML=”<strong>Hello</strong> <em>World></em>”;
      如果元素只包含文本,innerText和innerHTML返回相同的值。但是,如果同时包含文本和其他元素,innerText将只返回文本的表示,而innerHTML,将返回所有元素和文本的HTML代码。
      (二)outerText和outetHTML
      outerText和outerHTML的情况和前两者十分相似,只不过替换的是整个目标节点。例如,设置<div/>的outerText,将删除标签本身并把它替换成文本节点,考虑下面的这行代码:
      oDiv.outerText=”Hello World”;
      这一行代码等同于下面一系列DOM操作:
      var oText=document.createTextNode(“Hellow World! ”);
      var oDivParent=oDiv.parentNode;
      oDivParent.replaceChild(oText,oDivParent);
      outerText特性和innerText特性有个相同的规则,就是用相应的HTML实体替换所有的小于号、大于号、引号以及&号。类似的,outerHTML和innerHTML的行为也差不多,创建用HTML字符串表示的所有必要的DOM节点。
      虽然他们提供了强大的功能,但它们并未清楚地表示到底发生了什么。应该尽量避免使用outerText和outerHTML。这两个特性都可用来获取某个元素的内容。不管元素的内容是什么,outerText特性总是返回和innerText一样的内容。而另一方面,outerHTML是返回元素完整的HTML代码,包括元素本身。
      类似innerText,可以用某种独特的方式使用outerText。通过将outerText赋值给其自身,就可以删除元素,并把它替换成包含元素所有文本的一个文本节点。
      只有在IE和Opera中才支持outerText和outerHTML特性。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • WEB前端教程-JavaScript里的类和继承

    WEB前端教程-JavaScript里的类和继承

    2016-01-21 15:28

  • 高性能动画“box-shadow”属性 - FedFun - 博客频道 - CSDN.NET FedFun 爱前端,乐分

    高性能动画“box-shadow”属性 - FedFun - 博客频道 - CSDN.NET FedF

    2015-12-14 16:15

  • JS开发者调查 - FedFun - 博客频道 - CSDN.NET FedFun 爱前端,乐分享,前端痴王海庆的博客!

    JS开发者调查 - FedFun - 博客频道 - CSDN.NET FedFun 爱前端,乐分

    2015-12-13 11:08

  • Jquery下编写流行的前端的应用源码_Javascript教程

    Jquery下编写流行的前端的应用源码_Javascript教程

    2015-10-01 09:24

网友点评
2