javascript - 如何链接 getElementById 和 getElementByClassName

Question

我有一个 id 为“productPriceContainer”的 div，在这个 div 中有一个类“price”。我想访问“price”类的innerHTML，因为我还有其他名为“price”的类。

我可以链接这样的东西吗？

document.getElementById(productPriceContainer).getElementsByClassName(price).innerHTML

如果不是，那么做我需要的正确方法是什么？

谢谢

Answer 1

如果您price在带有 id 的元素中有一个带有 class 的元素productPriceContainer，您可以这样做

 document.getElementById('productPriceContainer')
     .getElementsByClassName('price')[0].innerHTML

注意 中的s。getElementsByClassName它解释了为什么你不能像这样链接。您没有调用函数getElementByClassName，因为与 id 相反，具有给定类的元素没有唯一性。

Answer 2

几乎。

• 如果要传递字符串，则必须传递字符串而不是未定义的变量
• getElementsByClassName（复数！）返回一个 NodeList，而不是一个节点，所以你必须循环它来获取节点（然后你可以在其上使用innerHTML.

Answer 3

1. "price"您正在向方法传递一个变量，而不是一个 String -> 它不应该是price。

2. 通过类名检索节点的方法是getElementsByClassName 您缺少“s”

3. 它返回一个 DOM 元素数组，因此您必须遍历容器的子元素

例如：

document.getElementById("productPriceContainer").getElementsByClassName("price")[0].innerHTML = "Asdf";

将容器元素innerHTML中的第一个 DOM 元素的类设置"price"为“Asdf”

遍历元素可能如下所示：

var elements = document.getElementById("productPriceContainer")
if(elements) {
  var classes = elements.getElementsByClassName("price");
   for (var i = 0; i < elements.length; i++) {
     elements[i].innerHTML = "Asdf" + i;
    }
}

这是一个JSBin