获取文本元素

Question

我是一个初学者。我想要弹出一个警告框，其中包含一个 <div> 的文本内容，但是得到了 null。

Javascript：

alert(document.getElementById("ticker").value);

HTML

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script src="Tick.js" type="text/javascript"></script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
            <div   id="ticker">
               Sample
            </div>
</asp:Content >

我做错了什么？

- Mansour

---

如果您只是想查找文本，我建议在IE中查看Element.innerText，在其他地方查看Element.textContent。 - user1385191

Answer 1

尝试：

alert(document.getElementById("ticker").innerHTML);

请记住，节点内部的文本被视为该节点的子节点，innerHTML将返回该元素中的所有HTML。

这里有解释: http://www.quirksmode.org/dom/intro.html 如果文本是唯一的子节点，innerHTML将正常工作。

以下代码等同于在示例中使用innerHTML：

alert(document.getElementById("ticker").firstChild.nodeValue);

它检索你的 div 的第一个子节点的节点值。

- Miquel

---

请查看我在问题上的评论。innerText和textContent将获取元素内部的文本节点。 - user1385191

如果我只想获取 div 内的文本，而不是任何其他 HTML 子元素，该怎么办？ - carloswm85

Answer 2

innerHTML会返回元素内的所有内容，包括HTML元素、其他节点和其中的文本。如果只想获取元素中直接显示的文本，请使用nodeValue或textContent属性：

例如： 文本

var a = document.getElementById("id").childNodes[0].nodeValue;
var b = document.getElementById("id").childNodes[0].textContent;

这将获取文本“abc”并将其放入变量a和b中，它们都将具有“abc”。但请注意，textContent在Internet Explorer 8中不受支持，而nodeValue则在DOM1中得到支持，这意味着非常旧的浏览器都支持它。如果您是初学者，可能不知道，但如果您在打开网页后立即执行JavaScript代码，则必须将JavaScript文件链接到html代码底部，紧挨着body关闭标签。这是因为如果您尝试获取/设置例如一个元素的文本，而该元素尚未被浏览器加载，您将收到JavaScript错误，您的代码将无法正常运行。如果您将JavaScript文件链接或将JavaScript代码放在页面头部，则会发生这种情况。浏览器从上到下读取页面，并在读取时执行所有内容并将其放置在计算机内存 - RAM中，这称为解析。因此，如果您在页面内容加载之前放置JavaScript代码，并且JavaScript代码尝试读取或设置尚未被浏览器读取的某些元素，则会出现错误。

- dekiss

---

请将那个冗长的正文添加段落。阅读它很痛苦，但信息很有用。如果您能添加关于“value”的信息，那就太好了。 - carloswm85

Answer 3

使用 innerHTML。

alert(document.getElementById('ticker').innerHTML);

甚至更好的是，使用jQuery的text()方法：

alert($('#ticker').text());

- Jon Gauthier

Answer 4

alert(document.getElementById("ticker").innerHTML);

- moe

Answer 5

在文档加载完成之前，它将不可用。请将JS代码更改为：

window.onload = function() {
   alert(document.getElementById("ticker").innerHTML);
}

- Shadow The Spring Wizard

Answer 6

使用 textContent 的问题是，它也会返回其他 HTML 元素中嵌套的文本内容。

因此，我最终得到了整个内容作为字符串，然后使用子字符串获取所需内容。

var contentString = "<h3>Jimmy John</h3> some text content that I need to get <span>...",
    startIndex = contentString.indexOf('</h3>') + 5; //indexOf gives index of '<', so incrementing
    endIndex = contentString.indexOf('<span>'),
    length = endIndex = startIndex;

var myText = contentString.substr(startIndex, length); //Voila

- Qasim