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

92

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

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

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

javascript html

— 宗师
source

162

您可能需要尝试textContent代替innerHTML。

GiveninnerHTML将返回DOM内容作为，String而不是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：

— 达尔
source

.textContentIE8及更低版本不支持该功能，因此使用起来有些困难。

— Blender '04

2

真正。实际上，innerHTML不要仅返回问题中要求的文本内容。我实现了一个基于解决方案.textContent的功能检测与<IE9回退

— DHAR

4

尽管问题比较老，但.textContent是当今世界更合适的答案。

— Donovan 2014年

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

— LogoS

9

由于textContentIE8及更早版本不支持，因此有一种解决方法：

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

innerText 可以在IE中使用。

— 瓦巴卡
source

0

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

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

console.log(textContentWithHTMLTags, textContent);

innerHTML并innerText受包括IE6在内的所有浏览器（FireFox <44除外）的支持。

— 阿卜杜斯
source

0

实际上，您无需调用document.getElementById()function即可访问您的div。

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

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

— 尼克·温特
source