javascript - 为什么 onmouse 不使用按类名获取？

Question

我对 JavaScript 相当陌生，我正在尝试使 onmouseover 事件将 h1 标记的颜色更改为红色，并将其更改回黑色 onmouseout。我知道有更简单/更简单的方法可以使用 css 实现这一点，例如简单地使用悬停样式，但我只是想了解为什么当语法似乎没问题时这首先不起作用？

<h1 class="demo">Mouse over me</h1>


<script>
  document.getElementsByClassName("demo").onmouseover = function() {mouseOver()};
  document.getElementsByClassName("demo").onmouseout = function() {mouseOut()};

  function mouseOver() {
    document.getElementsByClassName("demo")[0].style.color = "red";
  }

  function mouseOut() {
    document.getElementsByClassName("demo")[0].style.color = "black";
  }
</script>

Answer 1

类引用多个组件，因此添加[0]与鼠标悬停函数调用相同的索引

<h1 class="demo">Mouse over me</h1>


<script>
  document.getElementsByClassName("demo")[0].onmouseover = function() {mouseOver()};
  document.getElementsByClassName("demo")[0].onmouseout = function() {mouseOut()};

  function mouseOver() {
    document.getElementsByClassName("demo")[0].style.color = "red";
  }

  function mouseOut() {
    document.getElementsByClassName("demo")[0].style.color = "black";
  }
</script>