javascript - 更改嵌套在另一个 HTML 项目中的项目的 innerHTML

Question

这个问题已经有答案了:

What do querySelectorAll and getElementsBy* methods return? (12 个回答)

已关闭 3 年前。

我有一个 HTML 项目，如下所示:

<div id = "myTarget" class="myItem">
    <div class="nestedItem">0/0</div>       <!-- to be updated -->
</div>

我要更新nestedItem的内容动态地。但是，这段 JS 代码失败了:

document.getElementById("myTarget").getElementsByClassName("nestedItem").innerHTML = "1/4";

谁能告诉我出了什么问题吗？

Answer 1

这里的问题是 getElementsByClassName 返回一个类似数组的对象，其中包含您需要迭代的元素。来自 documentation :

The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class names.

可能的解决方案是:

const target = document.getElementById('myTarget');
const items = target.getElementsByClassName('nestedItem');

Array.prototype.forEach.call(items, e => e.innerHTML = '1/4');

<div id="myTarget" class="myItem">
    <div class="nestedItem">0/0</div>
</div>

希望对您有所帮助!