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

Question

我试过了，但显示“未定义”。

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

有什么方法可以使用简单的 Javascript 没有 jQuery 来获取价值吗？

Answer 1

您可能想尝试textContent而不是innerHTML.

GiveninnerHTML将返回 DOM 内容作为 aString而不仅仅是div. 如果您知道您div只包含文本但不适合每个用例，那很好。对于这些情况，您可能必须使用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：

• 文本内容
• 内部HTML

Answer 2

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

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

innerText确实在 IE 中工作。

Answer 3

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

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

console.log(textContentWithHTMLTags, textContent);

innerHTML并且被包括IE6innerText在内的所有浏览器（除了 FireFox < 44）支持。

Answer 4

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

您可以通过以下object方式直接使用它id：

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