如何使用纯 JavaScript 从 Div 元素获取文本内容？

使用纯 JavaScript 从 Div 元素获取文本内容

尝试使用“value”属性检索 div 中的文本，您遇到了返回“未定义”的问题。要使用纯 JavaScript 成功提取文本内容，您可以使用以下方法：

“value”属性主要用于 input 元素，而不是 div 元素。要访问 div 的文本内容，您应该利用“innerHTML”或“textContent”属性。

使用“innerHTML”属性：

function test() {
  var t = document.getElementById('superman').innerHTML;
  alert(t);
}

此方法检索整个div 中的内容，包括任何 HTML 标签。但是，如果您的 div 仅包含文本，则此方法是合适的。

或者，考虑使用“textContent”属性：

function test() {
  var t = document.getElementById('superman').textContent;
  alert(t);
}

“textContent”属性仅返回其中的文本内容div，不包括任何 HTML 标签。在处理可能包含混合内容的 div 时，此选项特别有用。

例如，考虑以下 HTML：

<div id="test">
  Some <span class="foo">sample</span> text.
</div>

使用“innerHTML”属性将返回以下内容：

var node = document.getElementById('test');

htmlContent = node.innerHTML;
// htmlContent = "Some <span class="foo">sample</span> text."

但是，利用“textContent”属性将产生：

textContent = node.textContent;
// textContent = "Some sample text."

有关更多详细信息和使用示例，请参阅 MDN 提供的综合文档：

• [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
• [innerHTML](https://developer.mozilla.org /en-US/docs/Web/API/Element/innerHTML)

以上是如何使用纯 JavaScript 从 Div 元素获取文本内容？的详细内容。更多信息请关注PHP中文网其他相关文章！