Question

这个问题来源于我最近发布的一个问题，但是他是一个不同的孩子＆＃34;如果你愿意的话。

我在Chrome控制台中学习和摆弄使用inspect元素功能。

以下是相关网站上的一些HTML：

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

我想抓住文字开始＆＃34;欢迎来到ushahidi ......＆＃34;

我将其输入控制台：

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

它返回了相关div的html。

然后我尝试输入： document.getElementsByClassName（＆＃39;报告-描述文本＆＃39）。H5

但那回归＆＃34;未定义＆＃34;。我曾期望它返回类似于上面的内容，除了显示h5元素的html，而不是父div。

我想尝试一下： document.getElementsByClassName（＆＃39; report-description-text＆＃39;）。h5。[文本或其他一些代码来获取内部文本]

但我必须误解我的教科书，使用点符号来导航DOM。

相关网页位于：http://tinyurl.com/qxvm5y7

我将如何以这种方式导航DOM？如果我想抓住其他元素怎么办？为什么我会看到＆＃34; undefined＆＃34;？

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] );

Answer 2

document.getElementsByClassName('report-description-text')返回一个像对象一样的数组，你可能想要 document.getElementsByClassName('report-description-text')[0].innerHTML

Answer 3

您尝试执行的操作无效，因为getElementsByClassName()返回类似数组的对象。当您尝试.h5时，JavaScript会查找名为h5的类数组对象的属性。此外，即使您选择了类数组对象的第一个元素，.h5也不会起作用。您需要使用getElementsByTagName()来获取h5。您可以尝试这样做：

document.getElementsByClassName('report-description-text')[0].getElementsByTagName('h5')[0];

使用点表示法来获取innerHTML或textContent

3 个答案: