如何通过DOM获取span标签内的文本值？附代码示例

嘿，我来帮你搞定这个问题！你已经通过TypeScript定位到了目标DOM元素，现在只需要简单几步就能拿到里的文本值啦。

首先先修正你现有代码里的小细节：你把span元素断言成了HTMLInputElement，这其实不准确，应该改成HTMLSpanElement或者更通用的HTMLElement，这样类型匹配更合理。

方法一：使用textContent（推荐） #

textContent是获取元素文本最可靠的方式，它会返回元素内所有的文本内容（包括子节点的文本），性能表现也更优。

修改后的TypeScript代码：

// 定位元素并修正类型断言
const charElement = document.getElementById('char') as HTMLSpanElement;
// 获取文本内容
const textValue = charElement.textContent;
console.log(textValue); // 输出：ThisIsTheValueupdated

方法二：使用innerText #

如果你需要获取用户可见的文本（比如元素被CSS隐藏的部分不会被获取），可以用innerText，不过它会考虑页面样式，性能略低于textContent：

const charElement = document.getElementById('char') as HTMLSpanElement;
const textValue = charElement.innerText;
console.log(textValue); // 输出：ThisIsTheValueupdated

安全优化：添加元素存在判断 #

为了避免元素不存在时出现报错，建议加上一个判断逻辑：

const charElement = document.getElementById('char') as HTMLSpanElement | null;
if (charElement) {
  const textValue = charElement.textContent;
  console.log(textValue);
}

小提醒 #

尽量不要用innerHTML来获取文本，因为如果span里嵌套了HTML标签，innerHTML会返回标签代码，不仅不安全还容易引发意料之外的问题。

内容的提问来源于stack exchange，提问作者Taieb