JavaScript | 获取 span 元素的文本

在JavaScript中，要获取页面上的span元素的文本内容，可以使用不同的方法来实现。下面介绍了几种常见的方法。

方法一: 使用innerHTML属性

const spanElement = document.getElementById('mySpan');
const text = spanElement.innerHTML;

上述代码使用document.getElementById方法获取id为mySpan的span元素，然后使用innerHTML属性来获取其文本内容。

方法二: 使用textContent属性

const spanElement = document.getElementById('mySpan');
const text = spanElement.textContent;

上述代码与方法一类似，也是通过document.getElementById方法获取span元素，然后使用textContent属性来获取其文本内容。

方法三: 使用innerText属性

const spanElement = document.getElementById('mySpan');
const text = spanElement.innerText;

上述代码与方法一和方法二不同，它使用innerText属性来获取span元素的文本内容。

注意：innerText方法会忽略元素中的隐藏文本，而textContent方法会返回元素中的所有文本，包括隐藏文本。

方法四: 使用querySelector方法

const spanElement = document.querySelector('span');
const text = spanElement.innerText;

上述代码使用querySelector方法选择第一个符合选择器条件的span元素，并获取其文本内容。

方法五: 使用jQuery

如果你正在使用jQuery库，获取span元素的文本内容更加简单：

const text = $('span').text();

上述代码使用jQuery的text方法来获取第一个匹配的span元素的文本内容。

总结

以上介绍了几种获取span元素文本内容的方法，你可以根据实际需求来选择适合你的方法。使用innerHTML属性、textContent属性、innerText属性或querySelector方法是在纯JavaScript中获取span元素文本内容的常见方法。如果你在项目中使用了jQuery库，那么使用jQuery的text方法更加方便。