当没有元素时，抓取innerHTML，只是文本

Question

我的网站平台提供了一些奇怪的HTML。有一些html看起来像这样：

<div class="report-description-text">
<h5>Description</h5>
Welcome to Ushahidi. Please replace this report with a valid incident
<br/>
</div>

我想抓住文字＆＃34;欢迎来到Ushahidi ..＆＃34;在最近的一篇文章的帮助下，我已经设法接近，但我无法得到我需要的东西。

如果我键入：

，则在Chrome的检查元素功能的控制台中

document.getElementsByClassName('report-description-text')[0].children[0].innerHTML

这将返回＆＃34;描述＆＃34; - H5元素的innerHTML。

如果文字＆＃34;欢迎来到Ushahidi ......＆＃34;被包裹在我可以写的<p>元素中

document.getElementsByClassName('report-description-text')[0].children[1].innerHTML

但是因为它只是文字我无法抓住它。

我在Chrome中的inspect元素中查看了选择器，它只是在父div名称旁边显示（文本）（请参阅附加屏幕截图的下一行。

如何抓取此实例中的文字？

---

我在回答以下问题后尝试过的图片：

Answer 1

尝试：

document.getElementsByClassName("report-description-text")[0].childNodes[1].nodeValue;

nodeValue是如何获取文本节点的文本的，但是当涉及到文本节点时，浏览器可能会很不稳定（有些人会考虑<h5>在新行上的事实作为它之前的文本节点，抛弃上面代码中的[1]

理想情况下，您希望通过JavaScript访问的任何内容都应该在其自己的元素中，因此请考虑调整HTML。

Answer 2

<div class="report-description-text">
<h5>Description</h5>
Welcome to Ushahidi. Please replace this report with a valid incident
<br/>
</div>

假设结构没有太大变化，你可以这样做：

var node = document.querySelectorAll(".report-description-text h5")[0]
    .nextSibling;
console.log(node.nodeValue);

替代：

var node = document.getElementsByClassName("report-description-text")[0]
    .getElementsByTagName("h5")[0]
    .nextSibling;
console.log(node.nodeValue);

Demo here

注意：.childNodes[1]方法可能失败，因为div在h5元素及其子元素之前包含空格：

[0] #text (whitespace)
[1] <h5>
[2] #text (the node you want)
[3] <br>