如何仅使用JavaScript（无需jQuery）获取div标签的文本

Question

我尝试过这个，但是显示为“未定义”。

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

有没有办法使用简单的Javascript（不用jQuery）获取值？

- agurchand

Answer 1

您可能想尝试使用textContent而不是innerHTML。

由于innerHTML返回的是包括在div中的DOM内容字符串，而不仅仅是文本，“text”的内容。如果您知道您的div只包含文本，则可以使用innerHTML。但这并不适用于所有情况。对于这些情况，您可能需要使用textContent而不是innerHTML。

例如，考虑以下标记：

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

你将会得到以下结果：

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

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

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

请参考MDN获取更多细节：

• textContent
• innerHTML

- dhar

---

.textContent 在 IE8 及以下版本中不受支持，这使得它有些难以使用。 - Blender

真的。实际上，“innerHTML”并没有像问题中要求的那样仅返回文本内容。我会基于“.textContent”特性检测实现一种解决方案，并为<IE9提供后备。 - dhar

虽然这是一个较旧的问题，但是.textContent对于当今的世界来说更加合适。 - Donovan

这对我帮助很大。非常感谢你。 - LogoS

一直很努力地寻找这个答案 -ty - confused

Answer 2

因为在IE8及更早的版本中不支持 textContent ，所以这里有一个解决方法：

var node = document.getElementById('test'),
var text  = node.textContent || node.innerText;
alert(text);

innerText 在 IE 中是可用的。

- dev4life

Answer 3

你可以使用 innerHTML（然后从 HTML 解析文本）或使用 innerText。

let textContentWithHTMLTags = document.querySelector('div').innerHTML; 
let textContent = document.querySelector('div').innerText;

console.log(textContentWithHTMLTags, textContent);

innerHTML和innerText被所有浏览器支持（除了FireFox < 44），包括IE6。

- Abdus

Answer 4

实际上，您不需要调用 document.getElementById() 函数来访问您的 div。

您可以直接使用该 id 的对象：

text = test.textContent || test.innerText;
alert(text);

- Nick Wynther