无法通过 id 找到元素，但我可以通过类找到它

Question

正如标题所示，我无法通过 ID 找到元素，但我可以通过类名找到它。

我是 Javascript 的菜鸟。

HTML：

<div class="pleaseWork" id="map" style="width:100%;height:300px"></div>

JS 函数：

function initMap() {
var mapDiv = document.getElementsByClassName("pleaseWork")
console.log('Find by class: ')
console.log(mapDiv)


var mapDivId = document.getElementById('map')
console.log('Find by id: ')
console.log(mapDivId)
}

控制台（Chrome 调试器）中的输出是这样的：

同样在访问 HTMLCollection 的第一个元素时，它返回 'undefined'。

所以 console.log(document.getElementsByClassName("pleaseWork")[0])

打印“未定义”

Answer 1

代码片段中的一切对我来说都正常工作，请确保在加载 DOM 后调用该函数。

function initMap() {
    var mapDiv = document.getElementsByClassName("pleaseWork");
    console.log('Find by class: ');
    console.log(mapDiv);


    var mapDivId = document.getElementById('map');
    console.log('Find by id: ');
    console.log(mapDivId);
};

//this will wait for the DOM to load before calling the function
window.addEventListener("DOMContentLoaded", function(){
    initMap();
});

<div class="pleaseWork" id="map" style="width:100%;height:300px"></div>