Question

您好，这是我的第一个问题，而且我是业余开发者，所以请事先原谅我。我试图抓住价值类的这个特定实例。我正在处理的网站有数百个与价值类相关的不同值。

<li class = "vin">
  <strong class = "title">VIN:</strong>
  <span class="value">121212121212121212</span>
</li>

以下是我一直在做的事情，但它还没有奏效。

var vinNum = document.getElementsByClassName('li.vin','span.value');
console.log(vinNum.innerText);

谢谢

Answer 1

虽然现有的答案已经覆盖了“现代”的方式 - 你可以使用大多数getElementsBy ...（我认为 - 除了getElementById之外的所有内容，但是由于某种原因以单数形式命名，并且因为所有元素的id特殊方法的含义。

Element.getElementsByClassName()方法返回一个实时HTMLCollection，其中包含具有所有给定类名的所有子元素。在文档对象上调用时，将搜索完整的文档，包括根节点。

所以你可以使用它两次，首先选择一个具有一个特定类的元素，然后选择另一个具有不同类“在其中”的元素，在前者的后代中。（不是“子元素”，因为引用的MDN引用错误地说明了它。）

var vinNumContainer = document.getElementsByClassName('vin')[0],
    vinNumElement   = vinNumContainer.getElementsByClassName('value')[0];

（在访问元素之前必须检查元素是否存在，如果存在多个元素（任何一个元素），该怎么办等），为简洁起见;-)

但是对querySelector的简单调用当然是一种更快捷的方式。

Answer 2

尝试

var vinNum = document.querySelector('li.vin span.value');
console.log(vinNum.innerText);

这是有效的，因为您不是按类选择，而是选择具有span.value作为子元素的li.vin元素。 vinNumber现在是一个节点元素。当你调用vinNum.innerText时，你应该得到正确的数字。在您的示例中使用console.log（vinNum）时，您很可能会看到未定义或不正确的元素。

Answer 3

您可以使用document.querySelector功能，以便根据类，ID或使用CSS选择器选择的任何其他内容搜索页面上的元素。

使用Mozilla的CSS Selector reference，我们可以看到选择一个元素作为其他元素的直接子元素的CSS选择器语法是A > B，其中A是一个匹配的选择器parent，B是与子项匹配的选择器。

所以一种方法是使用：

var vinNum = document.querySelector('li.vin > span.value')

上面的单行代码将匹配类span的第一个value元素，该元素是类li的{{1}}元素的子元素。

但是，如果您有多个此结构的示例（vin类li，其中vin类span，则使用此选择器赢了'工作。实际上，如果您希望单独访问类value的每个特定范围，可能最好的方法是add a unique id attribute to each of them。

如果您的结构如下所示：

value

然后您可以使用以下内容：

<li class = "vin">
  <strong class = "title">VIN:</strong>
  <span class="value" id="v25">121212121212121212</span>
</li>

当您拥有所有具有相同结构的嵌套HTML元素列表时，最后一个替代方法是使用document.querySelectorAll，它将返回与您的查询匹配的所有DOM节点，并允许您使用JavaScript来运行它们并选择您想要的值。