在前端开发中，我们经常需要获取页面上某个元素的文本内容。对于 span 元素来说，获取其文本值是一个很基础的操作。本文将介绍如何使用 JavaScript 获取 span 元素的文本值，并提供一些示例代码。
方法一：innerHTML 属性
innerHTML 属性是用来设置或获取元素内部 HTML 内容的属性。如果要获取 span 元素的文本值，可以使用以下代码：
const spanElement = document.querySelector('span');
const text = spanElement.innerHTML;
console.log(text);这段代码会输出 span 元素的完整 HTML 内容，包括标签和文本内容。但如果 span 元素内部有其他 HTML 标签，那么这种方法获取到的文本值可能并不是我们想要的。
方法二：textContent 属性
textContent 属性是用来设置或获取元素内部文本内容的属性。与 innerHTML 不同，textContent 会忽略所有 HTML 标记，只返回纯文本内容。如果要获取 span 元素的纯文本内容，可以使用以下代码：
const spanElement = document.querySelector('span');
const text = spanElement.textContent;
console.log(text);这段代码会输出 span 元素的纯文本内容，不包括任何 HTML 标签。如果 span 元素内部有其他 HTML 标签，这种方法会忽略它们并返回纯文本内容。
方法三：innerText 属性
innerText 属性也是用来设置或获取元素内部文本内容的属性。与 textContent 类似，innerText 会忽略所有 HTML 标记，只返回纯文本内容。但与 textContent 不同的是，innerText 还会考虑 CSS 样式对文本的影响。如果要获取 span 元素的纯文本内容，并且希望考虑 CSS 样式的影响，可以使用以下代码：
const spanElement = document.querySelector('span');
const text = spanElement.innerText;
console.log(text);这段代码会输出 span 元素的纯文本内容，考虑了样式对文本的影响。但需要注意的是，由于浏览器在计算样式时可能会出现一些问题，innerText 的表现并不总是符合预期。
总结
以上就是获取 span 元素文本值的三种方法：innerHTML、textContent 和 innerText。在实际开发中，应根据具体情况选择合适的方法。如果需要获取 span 元素内部的 HTML 内容，可以使用 innerHTML；如果只需要获取纯文本内容，可以使用 textContent 或 innerText。同时，还需要注意浏览器的兼容性和性能问题，避免出现意外情况。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---- -----------
-------
------
----- ------------------- -------------
--------
----- ----------- - -----------------------------------
-----------------------------------
-------------------------------------
-----------------------------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30453