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

javascript getelementbyid getelementsbyclassname

2022-08-30 01:36:56

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

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

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

我知道如何工作，但我想更具体一些。很抱歉，如果以前有人问过这个问题。document.getElementsByClassNamedocument.getElementById

答案 1

好吧，首先您需要选择具有类似.getElementById

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

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

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

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>

答案 2

你可以这样做：

var list = document.getElementById("foo").getElementsByClassName("bar");
if (list && list.length > 0) {
    list[0].innerHTML = "Goodbye world!";
}

或者，如果您想以更少的错误检查和更简洁的方式进行，则可以在一行中完成，如下所示：

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

在解释中：

注意事项：某些较旧的浏览器不支持（例如，旧版本的IE）。如果缺少该函数，可以填充到位。getElementsByClassName

这就是我建议使用具有内置CSS3选择器支持的库的地方，而不是自己担心浏览器兼容性（让其他人完成所有工作）。如果你只想要一个库来做到这一点，那么Sizzle将工作得很好。在Sizzle中，这将像这样完成：

Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";

jQuery内置了Sizzle库，在jQuery中，这将是：

$("#foo .bar").html("Goodbye world!");