js问题,我设置验证码为什么在DIV里面不显示?

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            .box{
                  width: 100px;
                  height: 100px;
                  background: blueviolet;
                  line-height: 70px;
                  color: #000;
            }
      </style>
      <script>
            


            function scc(n){
                  var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F" ];
                  var num = "";
                  for(i = 0 ; i < n; i++){
                        var position = Math.floor(Math.random() * (arr.length - 1));
                        num += arr[position];
                  }
                  document.getElementsByClassName("box").innerHTML = num;
                  console.log("num",num,document.getElementsByClassName("box").innerHTML)
            }

      </script>
</head>
<body>
      
      <div class="box">111111</div>
      <button onclick="scc(8)">点击我</button>


</body>
</html>

当设置 <div id="box">111111</div>的时候为什么会生效?但是用<div class="box">111111</div>的时候就不生效?

document.getElementsByClassName("box").innerHTML = num;返回的是dom数组,要获取dom对象

 

document.getElementsByClassName("box")[0].innerHTML = num;