JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性-阿里云开发者社区

开发者社区> 肥仔john> 正文

JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性

简介:
+关注继续查看

一、前言                              

  由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否 就能完全等同呢?在坑爹的表单元素(如input、textarea等)中表现是否依旧诡异呢?文本将记录一些实验结果,避免日后被玩坏。

 

二、innerHTML                          

  由于innerText和textContent均为对innerHTML内容作不同的处理而成,因此我们需要先明确innerHTML属性的特点。

  赋值操作:先对值内容进行模式匹配,然后把处理后的值赋予给innerHTML属性。

        模式匹配结果将导致 保留将字符转换为HTML实体 两个操作。

        a). 以下情况将被保留

             1. HTML实体(ASCII实体、符号实体和字符实体)的实体名或实体编号;

             2. 符号实体和字符实体对应的字符;

             3. 没有HTML实体与之对应的字符。

        b). 以下情况将会执行字符转换为HTML实体

              1. ASCII实体对应的字符(<、>、&、'和")。

        也就是说除了 <、>、&、'和" 会被转换为实体名外,将原封不动地将值赋予给innerHTML属性。

  取值操作:直接获取innerHTML属性值。

  后面的innerText和textContent内容将以下面的HTML Markup作为实验原材料

<style type="text/css">
 .line3, .line4{
   float: left;
 }
 .line5::after{
   content: "test"
 }
</style>
<div id="view">
  <div>line1</div>
  <div>line2</div><br/>
  <div class="line3">line3</div>
  <div class="line4">line4</div>
  <div style="clear:both;"></div>
  <div class="line5">line5</div>
</div>
<script type="text/javascript">
  var view = document.getElementById('view')
</script>

二、innerText                         

  浏览器支持:IE、Chrome

  赋值操作:先将ASCII实体对应的字符(<、>、&、'和")转换为实体名,然后把处理后的值赋予给innerHTML属性。

  取值操作:innerText的取值实际上就是对innerHTML的属性值进行一系列处理,然后返回,具体步骤如下

         1. 对HTML标签进行解析;

         2. 对CSS样式进行带限制的解析和渲染;

         3. 将ASCII实体转换为对应的字符;

         4. 剔除格式信息(如\t、\r和\n等),将多个连续的空格合并为一个。

  IE各版本和Chrome下对innerText进行取值均执行上述4步,但效果不尽相同。实验结果如下:

  IE5.5~8

     页面显示效果:

line1
line2

line3line4
line5
    innerText取值结果:
"line1
line2

line3line4line5"

   不全面的小结:在进行CSS样式渲染时,不支持伪元素和clear:both。

  IE9~11

     页面显示效果:

line1
line2

line3line4
line5test
     innerText取值结果:
"line1

line2


line3

line4



line5"

   不全面的小结:在进行CSS样式渲染时,只会应用元素的默认样式。

  Chrome

     页面显示效果:

line1
line2

line3line4
line5test
     innerText取值结果:
"line1
line2

line3line4
line5"

  不全面的小结:在进行CSS样式渲染时,不支持伪元素。

 

三、textContent                        

  浏览器支持:IE9~11、FireForx、Chrome

  赋值操作:先将ASCII实体对应的字符(<、>、&、'和")转换为实体名,然后把处理后的值赋予给innerHTML属性。

  取值操作:textContent的取值实际上就是对innerHTML的属性值进行一系列处理,然后返回,具体步骤如下

        1. 对HTML标签进行剔除;

        2. 将ASCII实体转换为相应的字符。

       注意:

            a). 对HTML标签是剔除不是解析,也不会出现CSS解析和渲染的处理,因此<br/>等元素是不生效的。

            b). 不会剔除格式信息和合并连续的空格,因此\t、\r、\n和连续的空格将生效。

  所有浏览器效果统一,界面效果:

line1
line2

line3line4
line5test

  textContent取值结果:

"
  line1
  line2
  line3
  line4

  line5
"

四、表单元素中的innerHTML、innerText、textContent和value  

   到这里大家应该对innerHTML、innerText和textContent之间的关系和行为有一定了解了,但不幸的是表单元素一如既往地会推翻 我们之前的理解。请注意的是上述的关系和行为仅限于非表单元素,而本节将介绍表单元素textarea和input[type="text"]相关的蛋 疼……

   前置信息: textarea和input[type="text"]的value属性与界面输入框是对应的,通过value属性赋值与在界面输入框输入值属于同一个操作。

  textarea

     FireFox

       a). innerHTML可被设置并且生效,对其他属性的影响:

            1. 无条件影响textContent的取值;

            2. 在通过value属性赋值前,会影响value的取值;

            3. 在通过value属性赋值后,则value的取值与innerHTML无关。

       b). textContent可被设置且生效,对其他属性的影响:

     1. 无条件影响innerHTML的取值; 

     2. 在通过value属性赋值前,会影响value的取值;

            3. 在通过value属性赋值后,则value的取值与textContent无关。

       c). value可被设置且生效。

    Chrome

   a). innerHTML可被设置并且生效,对其他属性的影响:

            1. 无条件影响innerText、textContent的取值;

            2. 在通过value属性赋值前,会影响value的取值;

            3. 在通过value属性赋值后,则value的取值与innerHTML无关。

   b). innerText可被设置并且生效,对其他属性的影响:

            1. 无条件影响innerHTML、textContent的取值;

            2. 在通过value属性赋值前,会影响value的取值;

            3. 在通过value属性赋值后,则value的取值与innerText无关。

       c). textContent可被设置且生效,对其他属性的影响:

     1. 无条件影响innerHTML、innerText的取值; 

     2. 在通过value属性赋值前,会影响value的取值;

            3. 在通过value属性赋值后,则value的取值与textContent无关。

       d). value可被设置且生效。

    IE9~11

  innerHTML、value、innerText和textContent均可设置且有效,无条件相互影响取值。

    IE5.5~8

     innerHTML、value、innerText和textContent均可设置且有效,无条件相互影响取值。

 

  input[type="text"]

    FireFox

  a). innerHTML可被设置且生效,无条件影响innerText和textContent的取值,但不会影响value的取值。

      b). textContent可被设置且生效,无条件影响innerHTML的取值,但不会影响value的取值。

  c). value可被设置且生效,不会影响innerHTML和textContent的取值。

    Chrome   

  a). innerHTML可被设置但无效,属性值永远保持空字符串。

  b). textContent可被设置且生效,但不会影响value、innerHTML和innerText的取值。

  c). innerText可被设置,但实际设置时会抛异常

<input type="text" id="target">
<script type="text/javascript">
  var getDesc = function(){ return Object.getOwnPropertyDescriptor.apply(Object, arguments) }
    , get = function(){ return document.getElementById.apply(docuemnt, arguments) }
  var target = get('target');
  console.log(getDesc(target, 'innerText'))   // Object {value: "", writable: true, enumerable: true, configurable: true}
  target.innerText = "1" // NoModificationAllowedError: Failed to set the 'innerText' property on 'HTMLElement': The 'input' element does not support text insertion.
</scr

  d). value可被设置且生效,但不会影响textContent、innerHTML和innerText的取值。

   IE5.5~8

      a). innerHTML可被设置,但实际设置时会抛异常

<input type="text" id="target">
<script type="text/javascript">
  var getDesc = function(){ return Object.getOwnPropertyDescriptor.apply(Object, arguments) }
    , get = function(){ return document.getElementById.apply(docuemnt, arguments) }
  var target = get('target');
  console.log(getDesc(target, 'innerHTML'))   // Object {value: "", writable: true, enumerable: true, configurable: true}
  target.innerText = "1" // 未知的运行时错误
</script>

     b). innerText可被设置且有效,无条件影响value取值。但innerText的取值永远是空字符串。

     c). value可被设置且生效,但不会影响innerHTML和innerText的取值。

 IE9~11

   a). innerHTML可被设置且生效,无条件影响innerText和textContent的取值。但不影响value的取值。

     b). innerText可被设置且生效,无条件影响value取值。但不影响innerHTML和textContent。innerText的取值由innerHTML的属性值经过处理后返回。

// 假设a是input[type="text"]
a.innerHTML = "<"
a.innerText = "test"
console.log(a.innerHTML) // <
console.log(a.value) // test
console.log(a.innerHTML) // <

     c). textContent可被设置且生效,无条件影响innerHTML和innerText的取值,textContent的取值由innerHTML的属性值经过处理后返回。

     d). value可被设置且生效,但不会影响innerHTML、textContent和innerText的取值。

 

五、HTML编码                         

  所谓HTML编码其实就是将字符转换为HTML实体,这是防止脚本注入的重要手段之一。

  由于表单元素的value与innerHTML关系在不同浏览器上表现各不相同,因此最保险的方式还是

;(function(exports, doc){
  var dom = doc.createElement('textarea')
  
  exports.encode = function(raw){
    dom.innerHTML = raw
    return dom.innerHTML
  }
  exports.decode = function(str){
    dom.innerHTML = str
    return dom['innerText' in dom ? 'innerText' : 'textContent']
  }
}(window.htmlEncoder = {}, document))

六、总结                            

  本文若有纰漏请大家指正补充,谢谢!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
从零开始学 Web 之 DOM(三)innerText与innerHTML、自定义属性
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1006 0
transient:将属性脱离序列化 | 带你学《Java语言高级特性》之七十一
transient关键字是类似于static、final等关键字的修饰符,它可以使类中的属性在序列化时跳过该属性,本节将为读者介绍其相关内容与用法。
528 0
Android TextView中文字通过SpannableString来设置超链接、颜色、字体等属性
在Android中,TextView是我们最常用的用来显示文本的控件。   一般情况下,TextView中的文本都是一个样式。那么如何对于TextView中各个部分的文本来设置字体,大小,颜色,样式,以及超级链接等属性呢?下面我们通过SpannableString的具体实例操作来演示一下。    res-layout-main.xml [html] view pla
981 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
8268 0
duilib 修复Text控件无法设置宽度的bug,增加自动加算宽度的属性
转载请说明原出处,谢谢~~:       今天有朋友反映CTextUI控件无法设置宽度,于是修复了这个bug,顺便给Text控件增加了一个自动计算宽度的属性,描述如下       bug出现在EstimeteSize函数,...
886 0
《21天学通Java(第6版)》—— 1.4 属性和行为
这两者在VolcanoRobot中都有,这是今天将作为类实现的项目。该项目使用计算机模拟火山探测工具,它模仿的是NASA的“遥控机器人研究”计划中用来在火山裂缝中进行研究探测的Dante II机器人。
1541 0
+关注
肥仔john
偏前端的临栈工程师^_^
201
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载