使用点表示法获取innerHTML或textContent

debugcn 发表于 Dev

道格·菲尔（Doug Fir）

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

我正在学习如何在Chrome控制台中使用inspect element功能。

这是有问题的网站上的一些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？如果我想获取其他元素怎么办？为什么我看到“未定义”？

先生代码

getElementsByClassName返回一个DOMHTMLCollection是像数组，所以你需要访问索引，如下所示：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。