textContent 与innerText

转自下面这位大神：

http://zhangyaochun.iteye.com/blog/1391370

其实关于这textContent与innerText有很多碎碎的东西，不过个人觉得还是一个不错的topic，好好讲讲吧。

1、关于兼容性

这个很多人应该都了解：

innerText除了ff3.6外，Chrome Safari Opera均支持

textContent除IE8及以下版本外，IE9 Chrome Safari Opera均支持

2、关于返回值

第一：这个其实也算兼容性里面的一种，主要考虑不同场景下的返回值：

如果容器设置了"visibility:hidden"

在Chrome Safari中获取该容器元素的innerText返回值是“”

在其他均返回的是正常的文本

相反，如果容器visible没有设置，而是默认值visibility

不存在浏览器差异

结论：

在Webkit下，innerText的返回值依赖与元素的visibility的值

第二：对于标签如<br />等的不同处理。

innerText是将元素的innerHTML换码---解释---显示，去除各种格式信息留下的是纯文本。

会将多个空格合并成一个

会将<br />转成换行符

textContent是innerHTML去除所有标签后的内容

会将<这些进行换码，直接剔除html的语义化标签

会保留多个空格

不会将<br />进行转换

第三：对应script标签里面的内容

innerText不能返回

textContent可以

时间： 2024-11-05 14:59:19

textContent 与innerText的相关文章

textContent vs innerText

Node类型的innerText属性和textContent属性可谓相爱相杀,作为最早被IE引入的innerText属性虽然被广泛使用,但是在2016年前一直是非标准属性,直到2016年才被HTML标准正式指定. Node类型的innerText属性和textContent属性十分类似,但还是有所不同: textContent会返回所有元素的非标签内容,其中包括<style>标签和<script>标签,但innerText不会返回这两个标签的内容. textContent会返回被隐

关于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和value属性

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

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

innerHTML outerHTML innerText textContent的区别

在网上看了很多博文介绍他们之间的区别,大部分都说FF中innerText不能使用,但经过自己试验,是可以用的,所以自己把各种情况总结了一下. 首先是innerHTML,这个就不用多说了,返回的是标签内部所有的内容,包括标签和文本,还有空格举两个栗子,对比一下空格导致的输出区别 <div id="main">1 <span>123</span> <p>222</p> <div class="test"

innerHTML，innertext ，textcontent，write（）

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

innerText与textContent的异同

转载自BetaRabbit的博文今天在使用innerText时遇到一个兼容性问题,FireFox不支持innerText方法,查了下MDN,发现FireFox下有个类似的方法,叫textContent,它和IE的innerText类似, 都是用来获取(设置)元素中text的方法. 语法设置 element.textContent = "text"; 获取 var text = element.textContent; Note: textContent和innerText

innerText兼容处理

转载自:https://www.cnblogs.com/leejersey/p/3520497.html:稍微改了一下和加了一些注释: IE.Safari.Opera和Chrome支持innerText属性.Firefox虽然不支持innerText,但支持作用类似的textContent属性.textContent是DOM3级规定的一个属性,而且也得到了safari.opera和Chrome的支持.为了确保跨浏览器兼容,有必要想下面这样通过函数来检测可以使用哪个属性:(注:与之对应的还有inn

CSS实现的几款不错的菜单栏

前言自从做了智慧城市这个项目之后,我一个做后端的开发者,瞬间转为前端开发,不过我还是很喜欢前端的.前端那些事,其实蛮有意思的,HTML实现的是静态的,使用ajax之后就可以和数据库交互了,加上js和jQuery之后就动起来了,加上CSS之后就更加炫酷了.因为项目中需要,查资料和编写了一些炫酷的二级菜单,分享给大家,好东西就要分享嘛! 一.滑动菜单 1.代码: 1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head&