textContent在Firefox下与innerText等效的属性

首先，需要解释一下 textContent 和 innerText 之间的区别。textContent 会将元素中的所有文本内容包括标签都作为一个字符串返回，而 innerText 只能获得元素中可视的文本内容，同时将元素中的标签和换行符剔除掉。在大多数情况下，textContent

首先，需要解释一下 textContent 和 innerText 之间的区别。textContent 会将元素中的所有文本内容包括标签都作为一个字符串返回，而 innerText 只能获得元素中可视的文本内容，同时将元素中的标签和换行符剔除掉。在大多数情况下，textContent 更加常用，因为它能够对元素中所有的文本内容进行精确的处理。

但在 Firefox 浏览器中，textContent 属性存在一个问题。它会将 <script> 或 <style> 等元素中的内容也包括在内，而这在某些情况下并不是我们所期望的。在这种情况下，我们可以将其与 innerText 属性配合使用，可以取得和 textContent 等效的效果。下面是两个示例：

首先，我们可以看一下以下 HTML 结构：

<div id="example">
    Hello, <strong>World</strong>!
</div>

如果我们想要获取 example 元素下的文本内容，可以使用以下代码：

const element = document.querySelector('#example');
const text = element.textContent || element.innerText;

在 Firefox 中，这段代码会返回 Hello, World!。而在其他浏览器中，将只返回 Hello,。

接下来，我们再看一个稍微复杂一点的示例。假设 HTML 结构如下：

<div id="example">
    <script>alert('Hello, World!')</script>
    <style>body { color: red; }</style>
    <p>This is an example.</p>
</div>

如果我们调用 textContent，Firefox 中会返回以下内容：

alert('Hello, World!')body { color: red; }This is an example.

而我们期望的结果是：“This is an example.”。因此，可以使用下面的代码：

const element = document.querySelector('#example');
const text = ('textContent' in element) ? element.textContent : element.innerText;

这样，在 Firefox 中也会返回和其他浏览器相同的结果，即：“This is an example.”。

综上，我们可以得出结论，在其他浏览器中可以直接使用 textContent 属性来获取元素的文本内容，但在 Firefox 中，最好使用上述的方法来获取。