如何从 javascript 中相同的多个 div 类名中获取特定值？

Question

这是 HTML：

 <div class="hMZdhd">Additional access <div class="OcFGjf"> <div role="listitem" class="wnt0Xd">View your approximate age</div> <div role="listitem" class="wnt0Xd">View your language preferences</div> </div> </div> <div class="hMZdhd">March 20, 12:06 PM</div>

我想访问 div 类“hMZdhd”的一个值，但我的 javascript 代码返回名称为“hMZdhd”的类的所有值。

这是我的示例 javascript 代码：

document.getElementsByClassName("hMZdhd")[0].innerHTML

输出应为： 3 月 20 日下午 12:06

任何帮助将不胜感激
谢谢

Answer 1

您要显示的元素位于类选择返回的数组的最后一个索引 ( .length - 1 ) 处，

[0]返回匹配类hMZdhd的第一个元素（即<div class="hMZdhd">Additional access[…]</div> ）。

 var elms = document.getElementsByClassName("hMZdhd"); console.log(elms[elms.length - 1].innerHTML)

 <div class="hMZdhd">Additional access <div class="OcFGjf"> <div role="listitem" class="wnt0Xd">View your approximate age</div> <div role="listitem" class="wnt0Xd">View your language preferences</div> </div> </div> <div class="hMZdhd">March 20, 12:06 PM</div>

在这种情况下，您可以尝试使用console.log(document.getElementsByClassName("hMZdhd"))来显示getElementsByClassName("hMZdhd")返回的完整数组。 这通常很有帮助。

Answer 2

由于您需要该类的最后一个div的内容，因此您可以计算最后一个div项目的索引并获得如下内容：

 var element = document.getElementsByClassName("hMZdhd"); var val = element[element.length-1].innerHTML; console.log(val);

 <div class="hMZdhd">Additional access <div class="OcFGjf"> <div role="listitem" class="wnt0Xd">View your approximate age</div> <div role="listitem" class="wnt0Xd">View your language preferences</div> </div> </div> <div class="hMZdhd">March 20, 12:06 PM</div>

Answer 3

您需要在最后一个 index上使用innerText而不是innerHTML 。

您的代码：

document.getElementsByClassName("hMZdhd")[0].innerHTML

你想要的代码：

var items = document.getElementsByClassName("hMZdhd");
var outputYouWant = items[items.length-1].innerText;

编辑：编辑代码以获得最后一项。 顺便说一句，innerText 是所询问输出的最真实答案，而不是innerHTML。

Answer 4

这是你想要的吗？

 var div = document.getElementsByClassName("hMZdhd")[0]; div.style.display = "none";

 <div class="hMZdhd">Additional access <div class="OcFGjf"> <div role="listitem" class="wnt0Xd">View your approximate age</div> <div role="listitem" class="wnt0Xd">View your language preferences</div> </div> </div> <div class="hMZdhd">March 20, 12:06 PM</div>