被玩坏的innerHTML、innerText、textContent和value属性

2023-11-22 01:59
文章标签 html 属性 frontend value inner innertext 玩坏 textcontent

本文主要是介绍被玩坏的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
line2line3line4
line5

    innerText取值结果：

"line1
line2line3line4line5"

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

  IE9~11

     页面显示效果：

line1
line2line3line4
line5test

     innerText取值结果：

复制代码 
"line1line2line3line4line5"
复制代码

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

  Chrome

     页面显示效果：

line1
line2line3line4
line5test

     innerText取值结果：

"line1
line2line3line4
line5"

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

 

三、textContent　　　　　　　　　　　　　　　　　　　　　　　　

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

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

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

        1. 对HTML标签进行剔除；

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

       注意：

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

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

  所有浏览器效果统一，界面效果：

line1
line2line3line4
line5test

  textContent取值结果：

复制代码 
"
  line1line2line3line4line5
"
复制代码

 

四、表单元素中的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.
</ script >

　　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))

六、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  本文若有纰漏请大家指正补充，谢谢！

这篇关于被玩坏的innerHTML、innerText、textContent和value属性的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/406662。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
滚雪球学Java(87)：Java事务处理：JDBC的ACID属性与实战技巧！真有两下子！

滚雪球学Java(87)：Java事务处理：JDBC的ACID属性与实战技巧！真有两下子！

咦咦咦，各位小可爱，我是你们的好伙伴——bug菌，今天又来给大家普及Java SE啦，别躲起来啊，听我讲干货还不快点赞，赞多了我就有动力讲得更嗨啦！所以呀，养成先点赞后阅读的好习惯，别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏，专业攻坚指数级提升，助你一臂之力，带你早日登顶🚀，欢迎大家关注&&收藏！持续更新中，up！up！up！！ 环境说明：Windows 10
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
HTML提交表单给python

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',
阅读更多...
Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

加密效果： 解密后的数据就是正常数据： 后端：使用的是spring-cloud框架，在gateway模块进行操作 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version></dependency> 编写一个AES加密
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2