javascript - 按类和 ID 获取元素内部的元素 - JavaScript

Question

好吧，我以前接触过 JavaScript，但我写过的最有用的东西是 CSS 样式切换器。所以我对此有点陌生。假设我有这样的 HTML 代码:

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

如何将 Hello world! 更改为 Goodbye world!？

我知道 document.getElementsByClassName 和 document.getElementById 是如何工作的，但我想更具体一些。抱歉，如果之前有人问过这个问题。

Answer 1

好吧，首先您需要使用类似getElementById 的函数来选择元素。

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];

getElementById 只返回一个节点，而getElementsByClassName 返回一个节点列表。由于只有一个元素具有该类名(据我所知)，您可以只获取第一个元素(这就是 [0] 的用途——它就像一个数组)。

然后，您可以使用 .textContent 更改 html。

targetDiv.textContent = "Goodbye world!";

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
targetDiv.textContent = "Goodbye world!";

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>