getElementsByClassName 不显示元素中的数据[重复]答案

【问题标题】：getElementsByClassName not showing data in an element [duplicate]getElementsByClassName 不显示元素中的数据[重复]
【发布时间】：2022-02-12 17:41:04
【问题描述】：

我知道有很多关于 getElementsByClassName 不起作用的问题，但是我浏览了很多并找不到适合我情况的答案

基本上我有以下代码

<script>

var res = localStorage.getItem('img');
    if(res == null){
            const myList = ['????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????'];
            res  = myList[Math.floor(Math.random() * myList.length)];
            localStorage.setItem('img', res);
        }
console.log(res);

document.getElementsByClassName("emoji").innerHTML = res

还有几个具有相同类的跨度

<span class="emoji" style="font-size: 40px !important;"></span>

问题是“res”在 span 中不打印任何内容

控制台日志打印一切正常，LS完美存储信息

我试过用身份证

document.getElementsById("emoji").innerHTML = res

而且它工作得很好，但是只有第一个 div （我应该这么想）

在这种情况下我可能做错了什么？也许我是瞎子，在我的代码中看不到一个非常简单的错误

提前致谢

【问题讨论】：

你必须输入document.getElementsByClassName("emoji")[0].innerHTML，因为 Document 接口的getElementsByClassName 方法返回一个类数组对象，其中包含所有具有给定类名的所有子元素。
document.querySelectorAll('.emoji').forEach(span => span.textContent = res)

标签： javascript html

【解决方案1】：

多个元素可以有相同的类名。 getElementsByClassName 返回具有类名的元素数组（它是 Elements 而不是 Element）。因此，如果您只有 1 个具有该类名称的元素，则可以使用 document.getElementsByClassName("emoji")[0].innerHTML = res。

【讨论】：

【解决方案2】：

如果你指定classname，那么你必须为类提供索引，因为它只在id的情况下将响应放在第一个元素中，它是唯一的，但在你必须指定类的情况下。

document.getElementsByClassName("emoji")[0].innerHTML = res;

【讨论】：

【解决方案3】：

getElementByClassName 总是返回元素的数组，通常可以从数组中读取一个元素作为索引基础，也可以类似的方式从 getElementByClassName 中获取元素。请参见下面的 sn-p。

const myList = ['?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?'];
var res  = myList[Math.floor(Math.random() * myList.length)];
document.getElementsByClassName("emoji")[0].innerHTML = res

&lt;span class="emoji" style="font-size: 40px !important;"&gt;&lt;/span&gt;

【讨论】：

嘿！不幸的是，这只适用于第一个带有表情符号的 div
您想同时打印不同 div 中的所有表情符号吗？