怎么判断dom元素是不是button

最新推荐文章于 2024-09-13 08:33:26 发布

LtHm

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量163

点赞数

分类专栏： js基础文章标签： javascript 前端 html Powered by 金山文档

本文链接：https://blog.csdn.net/cjn308408/article/details/129725372

版权

js基础专栏收录该内容

29 篇文章 1 订阅

订阅专栏

文章展示了如何通过JavaScript获取DOM元素，如通过ID获取<button>元素并打印其nodeName。此外，还演示了如何遍历所有<button>元素，为它们添加点击事件处理函数，当点击时弹出携带uid属性值的警告框。

摘要由CSDN通过智能技术生成

<body>
    <button id="123">123</button>
    <script>
        var btn = document.getElementById('123');
        //dom元素有很多属性nodeName就可以找到他的节点名字BUTTON
        console.log(btn.nodeName);

    </script>

</body>

扩展:给页面所有的button添加事件,拿到dom对象数组循环添加即可

<body>
    <button>123</button>
    <button>123</button>
    <button>123</button>
    <button>123</button>
    <button>123</button>
    <button>123</button>
    <button>123</button>
    <button>123</button>
    <button>123</button>
    <script>
        function BindByDom() {
            try {
                var htmlBtns = document.getElementsByTagName('button');//获取HTMLCollection对象集合
                //遍历集合，一个一个地设置点击事件
                for (var i = 0; i < htmlBtns.length; ++i) {
                    htmlBtns[i].onclick = function () {
                        var uid = this.getAttribute('uid');
                        alert("点击了按钮，uid = " + uid);
                    };
                }
            }
            catch (error) {
                alert(error);
            }
        }
        BindByDom()

    </script>

</body>