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

最新推荐文章于 2023-08-07 09:16:25 发布

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

最新推荐文章于 2023-08-07 09:16:25 发布

阅读量6.6k

点赞数 13

分类专栏：小知识点（报错、小知识）

本文链接：https://blog.csdn.net/tuzi007a/article/details/114275538

版权

小知识点（报错、小知识）专栏收录该内容

32 篇文章 1 订阅

订阅专栏

用自己的话讲有趣的知识。大家好，我是梅巴哥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>

现在，点击按钮，弹出带’别点我’的提示框。完美解决。

在JS中，我们常用的选择器，通常有：

ID的：document.getElementById('btn')
类的：document.getElementsByClassName('btn')[0]
全面的：document.querySelector('选择器')
标签的：document.getElementByTagName('button')
body的：document.body
html的：document.html

以上。

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

关注

13
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
小知识：btn.addEventListener is not a function报错处理

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

扫一扫