使用getElementsByTagName()获取标签注册onclick的问题

最新推荐文章于 2025-03-06 21:56:32 发布

机智的张皮皮

最新推荐文章于 2025-03-06 21:56:32 发布

阅读量2.2k

点赞数 6

分类专栏：前端web

本文链接：https://blog.csdn.net/zhanglink617/article/details/80160444

版权

前端web 专栏收录该内容

1 篇文章

订阅专栏

本文讲述了在JavaScript中遇到使用getElementsByTagName()获取标签并注册onclick事件不生效的问题。作者通过错误示例展示问题所在，并解释由于getElementsByTagName()返回的是一个元素集合，而非单一元素，因此直接注册事件无效。最终通过为元素添加ID并使用ID选择器解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用getElementsByTagName()获取标签注册onclick的问题

2018年5月1日在做项目的时候，遇到了一个很简单，却很棘手的问题，也只能怪自己当初上JavaScript课的时候没有好好听讲，自己平时写代码也太少，导致很简单问题花了几十分才解决掉。
错误代码：

<body>
    <input type="button" value="按钮">
    <script>
        var btn = document.getElementsByTagName("input");
        btn.onclick = function () {
            alert("Hello World!");
        }
    </script>
</body>

点击之后怎么都不输出信息，脑子一直在想，明明只有一个input标签，可以获取到为什么点击后不输出内容！我陷入了对onclick质疑，尝试了各种注册点击事件的方法，都是以失败告终！
后来，给input添加上ID属性，然后通过ID获取元素标签，然后注册标签的点击事件，可以输出信息。然后考虑到问题不在onclick方法上，是在getElementsByTagName();的身上，仔细想了想，和id选择器分析对比后，恍然大悟，它不像用ID是唯一的，直接获取到唯一的标签，它可能获取到多个input标签，因此是一个集合的存在，虽然HTML只有这一个input，但是还是以集合的形式存在的，给集合注册onclick事件，是不成立了，恍然大悟，谢天谢地！
正确代码：

<body>
    <input type="button" value="按钮">
    <script>
        var btn = document.getElementsByTagName("input");
        btn[0].onclick = function () {
            alert("Hello World!");
        }
    </script>
</body>