innerText与textContent的异同

转载自BetaRabbit的博文

今天在使用innerText时遇到一个兼容性问题,FireFox不支持innerText方法,查了下MDN,发现FireFox下有个类似的方法,叫textContent,它和IE的innerText类似, 都是用来获取(设置)元素中text的方法。

语法

  • 设置

element.textContent = “text”;

  • 获取

var text = element.textContent;

     Note: textContent和innerText类似,也会同时获取子元素的text content,比如

<div>this is <span>a</span> text!</div>
   // div.textContent == "this is a text!"

与innerText的区别

  • textContent会获取所有元素的content,包括`<script>`和`<style>`元素
  • innerText不会获取hidden元素的content,而textContent会
  • innerText会触发reflow,而textContent不会
  • innerText返回值会被格式化,而textContent不会

主流浏览器支持情况

    • IE 9+
  • Chrome 1+
  • FireFox(Gecko)

原文地址:https://www.cnblogs.com/wangwg1994/p/8412866.html

时间: 2024-10-07 11:35:23

innerText与textContent的异同的相关文章

Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个值:" id="txt"/> <input type="button" value="按钮" id="btn"/> <script> var txt=document.getElementB

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

一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否就能完全等同呢?在坑爹的表单元素(如input.textarea等)中表现是否依旧诡异呢?文本将记录一些实验结果,避免日后被玩坏. 二.innerHTML 由于innerText和textContent均为对innerHTML内容作不同的处理而成,因此我们需要先明确innerHTML属性的特点. 赋值操作:先对值内容进行模式匹配,然后把处理后的

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

一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否就能完全等同呢?在坑爹的表单元素(如input.textarea等)中表现是否依旧诡异呢?文本将记录一些实验结果,避免日后被玩坏. 二.innerHTML 由于innerText和textContent均为对innerHTML内容作不同的处理而成,因此我们需要先明确innerHTML属性的特点. 赋值操作:先对值内容进行模式匹配,然后把处理后的

javascript中innerText和textContent的兼容问题

IE支持innerHTML与innerText FireFox支持innerHTML与textContent 所以在IE与FireFox中使用显示内容时 必须得先判断浏览器 然后决定使用innerText还是textContent javascript中innerText和textContent的兼容问题

innerHTML/outerHTML; innerText/outerText; textContent

innerHTML v.s. outerHTML Element.innerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML Functionality Get serialized HTML code describing its descendants. Set : Remove all the children, parse the content string and as

value,innerHTML,innerText,textContent属性

value是带有value属性的标签拥有的值.一般是单闭合标签的属性.(可赋值,也可获取值) innerHTML属性,双闭合标签两个标签之间的内容.(识别标签)(可赋值,也可获取值) innerText属性,双闭合标签两个标签之间的内容.(不识别标签)(可赋值,也可获取值) textContent属性和innerText类似,老版本的火狐支持该属性(无老版本,未打印).(可赋值,也可获取值) <!DOCTYPE html> <html> <head lang="en

关于innerText和textContent

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> </head> <body> <div name="dddd"> <ul> <li&g

innerHTML,innertext ,textcontent,write()

innerhtml属于对象的一个属性,一般用于向已经存在的标签中写入内容,或者读取标签的内容. innertext属于对象的一个属性,一般只能用于写入内容,或者读取内容,不能读取dom 中的标签,且只适用于IE. 综上,一般我们为了提高代码的兼容性,建议使用innerhtml.但是innerhtml在IE 下却只能读取不能操作,这就涉及到createelement方法以及appendchild,先创建元素节点,继续用appendchild添加子元素,然后innerhtm添加内容. textcon

JavaScript DOM操作案例封装innerText跟textContent函数(浏览器兼容)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 500px; height: 20px; border: 2px solid red; } </style> </head> <body> <i