JavaScript DOM 操作与事件处理：获取元素、循环绑定事件与排它思想

最新推荐文章于 2025-06-03 18:54:56 发布

前端基地

最新推荐文章于 2025-06-03 18:54:56 发布

阅读量415

点赞数 3

分类专栏： 05JavaScript特效文章标签： javascript 获取某类标签排它思想循环绑定事件获取元素编号前端案例 JavaScript案例

本文链接：https://blog.csdn.net/chinayun_6401/article/details/146389153

版权

getElementsByTagName获取某类标签

非 VIP 用户可前往公众号“前端基地”进行免费阅读，文章链接如下：

02JavaScript DOM 操作与事件处理：获取元素、循环绑定事件与排它思想

getElementsByTagName获取某类标签

getElementsByTagName 方法用于获取文档中某类标签的所有元素。由于可能获取到多个元素，因此返回的是一个伪数组（HTMLCollection）。

语法：

document.getElementsByTagName(tagname)

单击按钮设置所有 <p> 标签的背景色，示例代码如下：

<body>
    <button id="btn">按钮</button>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <script>
        var btn=document.getElementById('btn');
        var ps=document.getElementsByTagName('p');
        console.log(ps);//HTMLCollection(3) [p, p, p]
        console.log(ps.length);//3
        btn.onclick=function(){
            for(var i=0;i<ps.length;i++){
                ps[i].style.backgroundColor='#efefef';
            }
        }
    </script>
</body>