为什么'getElementsByClassName'无法使用'.value'获取值，但是getElementById可以工作？

Question

我尝试使用“ getElementsByClassName”获取输入值，但返回错误：未定义 当我将其更改为“ getElementById”时，它工作正常。.我想知道为什么吗？

这不起作用- index.html

<div class="Add-To-Do">
            <input type="text" class="Activity" placeholder="Enter an Activity"></input>
            <button id="Add-Activity">Add</button>
        </div>

app.js-

document.getElementById('Add-Activity').addEventListener('click',(e)=>{
  var activity=document.getElementsByClassName('Activity').value
  console.log(activity);

所以我将其更改为此，并且它起作用了

index.html-

<div class="Add-To-Do">
            <input type="text" id="Activity" placeholder="Enter an Activity"></input>
            <button id="Add-Activity">Add</button>
        </div>

app.js-

document.getElementById('Add-Activity').addEventListener('click',(e)=>{
    var activity=document.getElementById('Activity').value
    console.log(activity);