javascript - 使用点符号来获取innerHTML或textContent

Question

这个问题源于我最近发布的一个问题，但如果您愿意的话，它是一个不同的“子”问题。

我正在学习和摆弄如何使用 Chrome 控制台中的检查元素功能。

以下是相关网站上的一些 html:

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

我想抓取以“欢迎来到 ushahidi...”开头的文本

我在控制台中输入了以下内容:

document.getElementsByClassName('report-description-text')

它返回了相关 div 的 html。

然后我尝试输入:document.getElementsByClassName('report-description-text').h5

但是返回“未定义”。我原以为它会返回与上面类似的内容，除了显示 h5 元素的 html，而不是父 div。

我想尝试一下:document.getElementsByClassName('report-description-text').h5.[文本或其他一些获取内部文本的代码]

但我一定误解了我的教科书上有关使用点表示法导航 DOM 的内容。

有问题的页面在这里:http://tinyurl.com/qxvm5y7

我如何以这种方式导航 DOM？如果我想抓取其他元素怎么办？为什么我看到“未定义”？

Answer 1

getElementsByClassName返回 DOM HTMLCollection 它就像一个数组，因此您需要像这样访问索引:

// get the first element with the class name
document.getElementsByClassName('report-description-text')[0];

您的<h5>不会出现在 HTMLCollection 中，因为它没有类名。但是，您可以像这样访问它:

var div = document.getElementsByClassName('report-description-text')[0];
console.log( div.children[0] ); // get the first child

// or get the first h5
console.log( div.getElementsByTagName('h5')[0] );