ie浏览器获取下拉菜单返回结果_JavaScript 获取文本内容 | 你在写错误的兼容代码吗？...

今天看到一段代码，类似 ——

上面代码试图获取节点的文本内容，如果 node.innerText 属性不存在，则使用 node.textContent 获取文本内容。

这段代码虽然不太正确的，但它能体现出很多内容。下面就逐一解析。

textContent 和 innerText 历史

首先，textContent 是最先标准化的，大部分浏览器都支持它，但是在 IE8 或更早的版本不支持。

而 innerText 最初是 IE 上的一个特有属性，后来经过标准化后其他浏览器也支持。

基于上述历史原因， node.innerText || node.textContent 希望对这两个获取文本的属性进行兼容性处理。但是，它的出发点就已经存在问题。

兼容处理的前提是需要 innerText 和 textContent 都是实现同一个功能。但这两个属性在功能就已经存在差异。所以这样的兼容做法是不正确的。

属性的异同

节点属性与元素属性

textContent 存在于所有的 node 节点， innerText 只存在于 HTMLElement 元素节点。

可以看出，文本节点 textNode 上不存在 innerText 属性。

而在获取文本内容上，它们也存在区别。

获取内容的区别

textContent 是基于 nodeValue 获取文本节点，它会返回元素内所有的文本内容。

innerText 是返回渲染后能显示的文本内容。

上述代码中，使用 textContent 可以完整地返回元素内的文本内容，而 innerText 并不会返回隐藏的 hello! 文本。

性能

通过性能比对，可以发现 textContent 比 innerText 快。

原因还是上面所说的，textContent 需要评估元素渲染后的显示状态。

innerText 特殊场景

如果应用 innerText 的节点，它本身不出现在文档流中，那么它就会按照 textContent 的规则去获取文本信息。

结语

对于如何获取节点内的文本内容，其实是一项较复杂的功能，上面只介绍了 textContent 和 innerText 的皮毛。

总结起来，日常需要注意的是：

• textContent 并不等同于 innerText
• textContent 获取节点内的文本内容，innerText 获取元素渲染后的文本内容