innerText和textContent

2024年5月23日 196次阅读 来源: 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)

    原文作者：BetaRabbit
    原文地址: https://segmentfault.com/a/1190000004360857
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞