小知识：btn.addEventListener is not a function报错处理

用自己的话讲有趣的知识。大家好，我是梅巴哥er。本篇介绍一个报错处理和document.getElementsByClassName('xxx')的用法。今天看到有人发帖说在用getElementsByClassName的时候出现了报错，而且就算解决了，也还没弄清原因，所以写一下关于报错原因、解决办法及获取DOM元素方法的总结，解决大家的疑惑。参考资料：MDN/getElementsByClass

新生代农民工官方认证码农小拽

6577人浏览 · 2021-03-02 02:23:11

新生代农民工官方认证码农小拽 · 2021-03-02 02:23:11 发布

用自己的话讲有趣的知识。大家好，我是梅巴哥er。本篇介绍一个报错处理和document.getElementsByClassName('xxx')的用法。

今天看到有人发帖说在用getElementsByClassName的时候出现了报错，而且就算解决了，也还没弄清原因，所以写一下关于报错原因、解决办法及获取DOM元素方法的总结，解决大家的疑惑。

参考资料：

MDN/getElementsByClassName的用法

报错举例：

// 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementsByClassName用法</title>
</head>
<body>
    <button class="btn">点击</button>
    <script type="text/javascript">
        var btn = document.getElementsByClassName('btn')
        btn.addEventListener('click', function() {
            alert('别点我')
        })
    </script>
</body>
</html>

这时候，就会报错：Uncaught TypeError: btn.addEventListener is not a function

为啥呢？

这时候，经过判断，问题肯定出在js代码里。

于是，修改代码：

<script type="text/javascript">
        var btn = document.querySelector('.btn')
        btn.addEventListener('click', function() {
            alert('别点我')
        })
    </script>

点击测试，正常！

那么，问题肯定就在getElementsByClassName的用法上。

于是，打开MDN，输入，查询。

拨云见日，茅塞顿开，大彻大悟！

getElementsByClassName得到的原来不是元素节点，而是元素节点组成的数组呀！怪不得会报错呢！

既然是数组，那就一起来看下这个数组里都有啥？

修改代码如下：

<script type="text/javascript">
        var btn = document.getElementsByClassName('btn')
        console.log(btn)
    </script>

输出结果是：HTMLCollection [button.btn]

也就是说，我们要的btn节点，存在于这个数组里。我们需要把我们要的节点，从这个数组里取出来，才能给这个节点添加监听事件。而不能直接给数组添加监听事件！

既然如此，那就好办了，我们把节点取出来就行了。即var btn = document.getElementsByClassName('btn')[0]

这样，我们就得到了节点：<button class="btn">点击</button>

我们把代码补全，再测试一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementsByClassName用法</title>
</head>
<body>
    <button class="btn">点击</button>
    <script type="text/javascript">
        var btn = document.getElementsByClassName('btn')[0]
        btn.addEventListener('click', function() {
            alert('别点我')
        })
    </script>
</body>
</html>