Javascript 选择嵌套类元素

Question

我正在努力改变我网站上 slider 的一些元素

我的 slider 代码如下所示:

<div class="cl1">
    <h1>Some heading</h1>
    <div class="sl_descr">Some description</div>
    <div class="sl_price">from only €00.00<br></div>
</div>

<div class="cl2">
    <h1>Some other heading</h1>
    <div class="sl_descr">Some other description</div>
    <div class="sl_price">from only €00.00<br></div>
</div>

<div class="cl3">
    <h1>yet some heading</h1>
    <div class="sl_descr">yet Some description</div>
    <div class="sl_price">from only €00.00<br></div>
</div>

我想在货币变化时更改价格。为此，我想使用带有 getElementsByClassName 的 javascript，然后使用 innerHTML。但是我的 javascript 无法正常工作。在这里

document.getElementsByClassName('cl1 sl_price').innerHTML="from only £00.00<br>";

关于如何为每个“cl”元素分别处理“sl_price”类的任何建议？干杯

Answer 1

getElementsByClassName 返回元素的集合(列表) (因此不会有 innerHTML 属性)

您可以尝试使用 document.querySelector(".cl1 .sl_price")(获取一个 css 选择器并返回第一个匹配项)

阅读更多信息 https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelector

最后的结果应该是这样的；

document.querySelector('.cl1 .sl_price').innerHTML = "from only £00.00<br>";

---

注意:我假设您只想匹配一个元素。如果没有，您应该查看@Bommox 的回答和querySelectorAll。