十年专注于品牌网站建设 十余年专注于网站建设_小程序开发_APP开发,低调、敢创新、有情怀!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

详细介绍innerText、innerHTML、outerText、outerHTML使用方法

百恒网络 2016-12-02 8902

在JavaScript中对文字编辑也是经常,通常标签不复杂性况下,我们也可以直接对标签内的容进行读取和修改操作,介于兼容性不是很理想前提下,我们先来了解下相关的方法及其他浏览器中替代的方法,结合实例让大家快掌握及投入到实际工作中。
       1.innerText属性
通过innertText属性可以操作元素中包含的所有文本内容,无论文本位于子文档树中的什么位置。在通过innerText读取值时,它会按照由浅入深的顺序,将子文档树中的所有文本拼接起来。以下面的HTML代码为例:


       

This is aparagraph with a list following it.


       

           
  • ltem l

  •        
  • ltem 2

  •        
  • ltem 3

  •        


       对于这个例子中的
元素而言,其innerText属性会返回下列字符串:
       This is a paragraph with a list following it.
       Item l
       Item 2
       Item 3
       由于不同浏览器处理空白符的方式不同,因此输出的文本可能会也可能不会包含原始HTML代码中的缩进。
使用innerText属性设置这个
元素的内容,则只需一行代码:
       div.innerText="Hello world!;
       执行这行代码后,页面的HTML代码就会变成如下所示:
       
Hello world!

       可见,设置innerText属性移除了先前存在的所有子节点,完全改变了DOM子树。此外,通过设置innerText属性还可以对所有出现在文本中的HTML语法字符(小于号、大干号、引号及和号)进行编码。例如,下面的这行代码:
       div.innerText="Hello&welcome, "reader"!";
       运行之后的结果如下:
       < div id=‘’content">Hello & welcome,<b>" reader"!< /b>

       设置innerText永远只会生成当前节点的一个子文本节点,而为了确保只生成一个子文本节点, 就必须要对文本进行HTML编码。此外,还可利用innerText属性过滤掉HTML标签。方法是将 innerText设置为等于innerText,这样就可以去掉所有HTML标签,如下所示:
       div.innerText=div.innerText:
       执行这行代码的结果就是用原来的文本替换容器元素中的所有内容。        在此,南昌网站制作公司百恒网络开发工程师提示大家IE、Safari、Opera和Chrome支持innerText属性。Firefox虽然不支持innerText,但支持作用类似的textContent属性。textContent是DOM3级规定的一个属性,而且也得到了Safari、Opera 和Chrome的支持。为了确保跨浏览器兼容,有必要像下面这样通过函数来检测可以使用哪个属性:
function getInnerText(element){
       return ( typeof element.textContent=="string") ?
              element.textContent : element.innerText:
       }
function setInnerText(element, text){
       if (typeof element.textContent== "string"){
              element.textContent=text:
       } else {
              element.innerText=text:
       }
}
       这两个函数都接受一个元素,然后检查这个元素是不是有textContent属性。如果有,那么type of element.textContent应该是"string";如果没有,那么这两个函数就会改为使用innerText,可以像下面这样调用这两个函数:
       setInnerText( div, "Hello worldl“);
       alert( getinnerText (div)); //"Hello world!"
使用这两个函数可以确保在不同的浏览器中使用正确的属性。
2.innerHTML属性
       innerHTML与innerText在很多方面都很相似。在读取信息时,innerHTML返回当前元素所有子节点的HTML表现,包括元素、注释及文本节点。在写入信息时,innerHTML会按照指定的值创建新的DOM子树,并以该子树替换当前元素的所有子节点。提到innerHTML与innerText之间最 主要的区别,无非就是innerHTML处理的是HTML字符串,而innerText处理的是普通文本字符串。
以下面的HTML代码为例:

This is aparagraph with a list following it.


       

                 
  • ltem l

  •              
  • ltem 2

  •              
  • ltem 3

  •        

< /div>
这里面
元素的innerHTML属性将返回下列字符串:

This is aparagraph with a list following it.



           
  • ltem l

  •        
  • ltem 2

  •        
  • ltem 3


       在不同浏览器中,innerHTML返回的文本可能会有所不同。IE和Opera常常把所有标签转换为大写,而Safari、Chrome和Firefox则以文档中指定的形式返回HTML-包括空格和缩进。不要指望所有浏览器都会返回没有丝毫差别的innerHTML值。
       在写入信息时,innerHTML会将给定的字符串解析为DOM子树,并用这个子树替换所有的子节 点。由于赋给innerHTML的字符串会被当作HTML,因此其中包含的所有标签都会按照浏览器处理 HTML的标准方式,被转换成对应的元素(同样,这个过程也会因浏览器而异)。如果像下面这样, 只设置简单的文本,那么结果就如同设置innerText -样:
       div.innerHTML="Hello world!":
       如果为innerHTML设置的字符串中包含HTML代码,结果可能就会大不一样了。区别就在于innerText会转义HTML语法字符,而innerHTML会解析它们。来看下面的例子:
       div.innerHTML="Hello&welcome, \"reader"!";
       执行这行代码之后的结果是:
       
Hello & welcome, " reader"!

       在设置完innerHTML之后,马上就可以像访问文档中的其他节点一样访问新生成的节点。
       设置innerHTML会导致浏览器将HTML字符串解析为对应的DOM树。换句话说,设置完innerHTML之后再读取它,将会得到一个差别很大的字符串。这个字符串不再是原始的
HTML代码,而是根据原始HTML字符串创建的DOM子树经过序列化之后的结果。
       innerHTML也有一些限制。首先,在多数浏览器中,通过innerHTML插入的
400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×