为什么addEventListener无法与HTML一起使用

Question

当我单击导航栏中的选项时，我有这个addEventListener可以正常工作，但不能正常运行，Chrome告诉我child.addEventListener不是函数。

我已经尝试使用调用函数而不是匿名函数来切换addEventListener。

我的JS代码：

var child = document.getElementsByClassName("nav-link");

child.addEventListener("click", function() {
   child.style.color = "#C23314"; 
});

我的HTML代码：

<ul class="navbar-nav ml-auto">
    <li class="nav-item">
        <a class="nav-link" id= "inicio" href="#">Inicio</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Productos</a>
        <li class="nav-item">
        <a class="nav-link" href="#">Acerca</a>
    </li>
</ul>

只希望链接在我单击时更改颜色。