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

这个问题源于我最近发布的一个问题，但如果你愿意的话，这是一个不同的“儿童”问题

我正在学习和摆弄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/>

它返回了有问题的div的html

然后我试着打字： document.getElementsByClassName（'report-description-text'）.h5

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

然后我想尝试： document.getElementsByClassName（'report-description-text'）.h5。[文本或其他一些代码获取内部文本]

但我一定是误解了我的教科书中关于使用点符号导航DOM的内容

有关页面如下：

---

我如何以这种方式导航DOM？如果我想抓住其他元素呢？为什么我看到“undefined”？

文档。GetElementsByCassName（'report-description-text'）

返回类似数组的对象，您可能需要

---

document.getElementsByClassName（'report-description-text'）[0]。innerHTML

document.getElementsByClassName（'report-description-text'）

返回类似数组的对象，您可能需要

---

document.getElementsByClassName（'report-description-text'）[0]。innerHTML

getElementsByClassName

返回一个类似数组的DOM，因此您需要像这样访问索引：

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

您的

将不会出现在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] );

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

---

getElementsByClassName

返回一个类似于数组的DOM，因此需要像这样访问索引：

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

您的

将不会出现在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] );

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

---

您尝试执行的操作无效，因为

GetElementsByCassName（）

返回类似数组的对象。当您尝试

.h5

时，JavaScript会查找名为h5的类似数组的对象的属性。此外，

.h5

即使选择类似于数组的对象的第一个元素，也不起作用。您需要使用

getElementsByTagName（）

获取

h5

。您可以尝试这样做：

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

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

---

您尝试执行的操作无效，因为

GetElementsByCassName（）

返回类似数组的对象。当您尝试

.h5

时，JavaScript会查找名为h5的类似数组的对象的属性。此外，

.h5

即使选择类似于数组的对象的第一个元素，也不起作用。您需要使用

getElementsByTagName（）

获取

h5

。您可以尝试这样做：

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

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

---

谢谢，我不知道它返回了一个数组。接受shortlyNo问题：）请记住，它返回一个NodeList对象，它与数组不同，但类似之处在于您可以迭代它并使用索引进行访问。等等！我就快到了，但似乎遇到了麻烦，因为我正在寻找的实际文本没有包装在任何标记中。我能得到的最接近的结果是：document.getElementsByClassName（'report-description-text'）[0]。children[0]。返回“description”的innerHTML。但是我需要相邻（兄弟）元素——尽管文本甚至不在元素中。请参见上面问题中的代码。有办法抓住它吗？我觉得我很接近了谢谢你，我从来不知道它返回了一个数组。接受shortlyNo问题：）请记住，它返回一个NodeList对象，它与数组不同，但类似之处在于您可以迭代它并使用索引进行访问。等等！我就快到了，但似乎遇到了麻烦，因为我正在寻找的实际文本没有包装在任何标记中。我能得到的最接近的结果是：document.getElementsByClassName（'report-description-text'）[0]。children[0]。返回“description”的innerHTML。但是我需要相邻（兄弟）元素——尽管文本甚至不在元素中。请参见上面问题中的代码。有办法抓住它吗？我觉得我很接近