textContent和innerText属性

eechen 发布于2019-08-19 18:12 / 3201人阅读

摘要：在操作中，我们如果要获取和修改节点的的文本，就离不开或属性。其中作为标准方法，但无奈要而属性最近也被火狐支持了，已经成了不是标准的标准参考。

在DOM操作中，我们如果要获取和修改节点的的文本，就离不开textContent或innerText属性。其中textContent作为标准方法，但无奈要IE8+；而innerText属性最近也被火狐支持了，已经成了不是标准的标准（参考）。也就是说，如果只考虑最新浏览器的话这两个方法都是可以使用的，那他们到底使用时有何不同呢？先上代码：

    testtest

运行上述代码，结果为：

可看到存在两个差异：

textContent会获取style元素里的文本（若有script元素也是这样），而innerText不会

textContent会获取display:none的节点的文本；而innerText好像会感知到节点是否呈现一样，不作返回

也就是说，textContent能够获取元素的所有子节点上的文本，不管这个节点是否呈现；而innerText只返回呈现到页面上的文本。

当然，除了获取文本，这两个元素也可以设置元素的文本内容，不过要注意设置文本时被替换的可不只是文本了；这时，两个属性作用相当于innerHTML属性，会把指定节点下的所有子节点也一并替换掉。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79303.html

innerHTML、innerText、textContent、outerHTML和value，傻傻

摘要：会省略内嵌的标签名，所以文本的只显示了的内容，并没有显示的标签名也必须是标签对的形式删除了格式信息，所有文本均在一行，所以文本的内容都在一行。也用来设置或获取成对标签之间的内容，并且只关注文本信息。之前，是不支持的。是的亲儿子，放心用吧。原文地址：https://www.xksblog.top/innerHTML-innerText-textContent-outerHTML-val...

HollisChuang 2019-08-23 11:35 评论0 收藏0
关于DOM的问题笔记

摘要：实时可以传参返回包括了所有名字符合指定条件的元素实时可以传参用于选择拥有属性的元素比如和等返回匹配指定属性的元素节点。返回位于页面指定位置最上层的子节点。此外，使用可以防止攻击。而自身不在存在于创建它时所在的位置。 1. 获取某个 dom 元素的方式 //节点集合属性（元素节点选取） document.all //返回文档中所有元素 document.links //返回当前文...

FullStackDeveloper 2019-08-22 10:54 评论0 收藏0
JavaScript DOM 5 － HTML元素的内容

摘要：一个元素的内容到底是指什么特别是对于那些有子节点的元素。对于这种类型的，和返回的结果也不同。假如我们有这样的一段代码我们对分别取和，得到的结果如下还是会把里面的内容返回来，但是则不会。一个HTML元素的内容到底是指什么？特别是对于那些有子节点的HTML元素。1: 首先来看一下可以获取HTML元素的内容的方式有哪些： 1: element.innerHTML 2: element.o...

Harpsichord1207 2019-08-20 17:29 评论0 收藏0
innerText和textContent

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

ephererid 2019-08-19 17:28 评论0 收藏0
高程3总结#第11章DOM扩展

摘要：操作类名时可以通过属性添加删除和替换类名。如果将可选的参数设置为，则表示尽量将元素显示在视口中部垂直方向。将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。 DOM扩展选择符API querySelector()方法 querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null //取得body元素 var b...

cucumber 2019-08-23 12:00 评论0 收藏0