javascript - ClassName 与 Id - Javascript 函数

Question

这个问题已经有答案了:

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

已关闭 6 年前。

如果这看起来非常基本，请提前道歉。

我很困惑为什么会这样:

<div id="box">Hello World</div>
<button id="myButton">Click</button>

<script>
    let myBox = document.getElementById('box');
    let myButton = document.getElementById('myButton');

    myFunction = () => {                        
        myBox.innerHTML = 'Thanks';  
    }

    myButton.addEventListener("click", myFunction);
</script>

但这并不:

<div class="box">Hello World</div>
<button class="myButton">Click</button>

<script>
    let myBox = document.getElementsByClassName('box');
    let myButton = document.getElementsByClassName('myButton');

    myFunction = () => {                        
        myBox.innerHTML = 'Thanks';  
    }

    myButton.addEventListener("click", myFunction);
</script>

第二个通过类名而不是 Id 获取 DOM 元素会在控制台中生成以下错误:

Uncaught TypeError: myButton.addEventListener is not a function

已经四处搜寻，但似乎找不到任何明确的答案。

谢谢!

Answer 1

document.getElementsByClassName 返回具有提供的类名的多个元素，而 getElementById 返回具有提供的 id 的单个元素。

尝试:

let myButton = document.getElementsByClassName('myButton')[0]; // if there is single such button