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

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


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


参考资料


报错举例

// 举个例子
<!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

以上。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页