用 getElementsByClassName 替换 getElementById答案

【问题标题】：Replace getElementById wtih getElementsByClassName用 getElementsByClassName 替换 getElementById
【发布时间】：2021-04-29 07:55:05
【问题描述】：

我正在尝试将getElementById 替换为getElementsByClassName。

这是我的原始代码。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    function showDiv() {
        document.getElementById('loadingGif').style.display = "block"; //don't touch
        setTimeout(function () {
            document.getElementById('loadingGif').style.display = "none";//don't touch
        }, time);
    }
</script>

<div id="loadingGif" style="display:none">
    <img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/35771931234507.564a1d2403b3a.gif">
</div>

但是，当我将 CSS id 更改为 class 并将 getElementById 更改为 getElementsByClassName 时，它不再起作用。

请问我做错了什么？

谢谢

【问题讨论】：

getElementsByClassName() 始终返回元素的列表。
你不会得到一个数组，你会得到一个HTMLCollection，它是一个对DOM的live引用。要按类返回单个元素，请尝试 querySelector('.classname')
@Pauline 如果不需要新数组，则没有理由使用.map()；这是.forEach()的工作

标签： javascript

【解决方案1】：

getElementsByClassName 是 DOM 的一个方法，返回一个类似数组的对象。

为了访问一个元素，您必须使用一个 for 或 foreach。

const array = document.getElementsByClassName('loadingGif');
Object.keys(array).forEach((key) => {
    array[key].style.display = "block";
});

setTimeout(function () {
    Object.keys(array).forEach((key) => {
        array[key].style.display = "none";
    });            
}, time);
});

尝试使用 querySelector(".classname") 代替 getElementsByClassName。

【讨论】：

【解决方案2】：

谢谢@pilchard。

我必须将document.getElementById('loadingGif') 替换为document.querySelector('.loadingGif')。

【讨论】：