`
zhangyaochun
  • 浏览: 2621982 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

浅谈一下textContent与innerText

阅读更多

其实关于这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换码---解释---显示,去除各种格式信息留下的是纯文本
  1. 会将多个空格合并成一个
  2. 会将<br />转成换行符
  • textContent是innerHTML去除所有标签后的内容
  1. 会将&lt;这些进行换码,直接剔除html的语义化标签
  2. 会保留多个空格
  3. 不会将<br />进行转换
 
 
第三:对应script标签里面的内容
 
  • innerText不能返回
  • textContent可以
 
2
0
分享到:
评论
2 楼 zhangyaochun 2012-02-03  
newdefence 写道
最后一句多个字母y,是textContent;

好的 感谢感谢
1 楼 newdefence 2012-02-03  
最后一句多个字母y,是textContent;

相关推荐

    javascript textContent与innerText的异同分析

    textContent与innerText的不同 IE下有个innerText属性,FF下有个textContent属性。很多以前给IE写脚本的,在FF下找不到innerText属性,于是网上搜到的建议是用textContent来替代。反之给FF写脚本的也一样。 但是实际...

    textContent在Firefox下与innerText等效的属性

    ### textContent与innerText属性在不同浏览器中的应用 #### 一、引言 在网页开发过程中,经常需要获取或设置HTML元素中的文本内容。对于这一需求,JavaScript提供了两种方法:`innerText` 和 `textContent`。这两种...

    innerText和textContent对比及使用介绍

    3. 性能影响:innerText在获取文本时可能触发页面的重排(reflow),因为需要计算格式化后的文本布局,而textContent则不会,因此在大量操作文本时,textContent通常具有更好的性能。 4. 兼容性:innerText在IE浏览...

    innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解

    JavaScript中的innerHTML、outerHTML、textContent和innerText属性是处理HTML元素内容和文本的四个关键属性,它们各有特点,适用场景也有所不同。以下是对这些属性的详细解释: 1. innerHTML属性: innerHTML属性...

    js中innerHTML与innerText的用法与区别

    不过,为了更广泛的兼容性,推荐使用`textContent`属性,它在所有现代浏览器中都可用,并且行为与`innerText`类似。 #### 应用场景 - **使用`innerHTML`:** - 当需要动态生成HTML结构时,例如构建表格或列表。 ...

    innerHTML和innerText的区别

    但是,需要注意的是,innerText 属性只适用于 IE 浏览器,在其他浏览器中可能不支持。 outerHTML 属性 outerHTML 属性用于获取 HTML 元素中的所有内容,包括 HTML 元素本身。例如,在上面的代码中,test.outerHTML...

    js中innerText/textContent和innerHTML与target和currentTarget的区别

    今天小编就为大家分享一篇关于js中innerText/textContent和innerHTML与target和currentTarget的区别,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

    textContent

    6. **安全与权限**:对LOB数据的访问应遵循标准的数据库权限机制。可以通过GRANT和REVOKE命令授予或撤销对特定LOB字段的读写权限。 7. **存储策略**:Oracle提供了多种存储策略,如外部LOB、临时LOB和内联LOB。选择...

    innerhtml用法 innertext用法 以及innerHTML与innertext的区别

    为了实现跨浏览器兼容性,可以使用`innerText`和`textContent`的组合: ```javascript var textContent = element.textContent || element.innerText; ``` 当需要从`innerHTML`获取无HTML标签的纯文本时,可以使用...

    innerHTML、outerHTML、innerText、outerText的用法与区别

    在跨浏览器兼容性考虑时,由于`innerText`在非IE浏览器中的实现可能不完全相同,推荐使用`textContent`属性作为替代,因为`textContent`在所有现代浏览器中都有良好的支持,它与`innerText`类似,但不处理CSS样式。...

    javascript解决innerText浏览器兼容问题思路代码.docx

    JavaScript 提供了多种方法来实现这一功能,其中较为常用的是 `innerText` 和 `textContent` 属性。然而,在不同的浏览器环境下,这些属性的表现并不完全一致,特别是在处理一些特殊字符时。因此,确保跨浏览器的...

    让FireFox支持innerText的实现代码

    由于innerText能够考虑到元素的CSS display属性,比如对于display为block的元素会添加换行符,因此它在处理复杂布局时比textContent更为方便,后者只返回元素的纯文本,不考虑样式。 为了让Firefox支持innerText...

    firefox浏览器不支持innerText的解决方法

    然而,Firefox浏览器却并不支持innerText属性,而是使用textContent来达到相同的效果。在这种情况下,如果你的代码依赖于innerText,那么在Firefox上运行时可能会出现问题。 为了解决Firefox不支持innerText的问题...

    javascript解决innerText浏览器兼容问题思路代码

    innerText属性在JavaScript中...在编写代码时,可以结合使用innerText、textContent、innerHTML等属性,以及自定义的遍历函数,以适应不同的浏览器环境。同时,利用现代前端框架和库的特性,可以更轻松地解决这些问题。

Global site tag (gtag.js) - Google Analytics