【Web APIs】JavaScript 操作多个元素 ① ( 多选一互斥按钮案例 | getElementsByTagName 方法获取 HTMLCollection 伪数组对象 )

韩曙亮

发布于 2024-08-09 09:27:31

12100

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏

运行总次数：0

代码可运行

之前的 JavaScript 中使用 DOM 操作元素 , 都是操作单个元素 , 从本篇博客开始进行多元素的操作 ;

一、多元素操作案例

1、案例需求 - 多选一互斥按钮案例

实现如下效果 , 页面中有多个按钮 , 点击一个按钮 , 本按钮高亮显示 , 将其它按钮重置 ;

2、案例核心要点 - getElementsByTagName 方法获取多个元素

通过调用 Document 对象或 Element 对象的 getElementsByTagName 方法 , 可以得到一个 HTMLCollection 对象 , 这是一个伪数组 , 可通过数组下标获取 DOM 对象 ;

getElementsByTagName 函数原型如下 :

HTMLCollection getElementsByTagName(String tagName);

tagName 参数 : 元素的标签名称 , 表示要查找的元素的标签名 , 该参数是不区分大小写 ;
返回一个 HTMLCollection 对象 , 这是一个动态更新的集合 , 包含了所有匹配的元素 , HTMLCollection 类似于数组 , 但它并不是一个真正的数组 , 无法使用数组的许多方法 , 可以使用数组下标访问 Element 元素 ;

HTMLCollection 是实时集合 , 也就是如果该方法被调用后 , 文档结构发生了改变 , 那么 HTMLCollection 集合中的元素 , 也要跟着更新 ;

调用 document.getElementsByTagName('button') 代码 , 可以获取文档中所有的 button 标签 ,

        // I. 获取所有 button 标签元素
        // getElementsByTagName 函数 的 返回值是 NodeList 对象 , 
        var buttons = document.getElementsByTagName('button');

通过 buttons[i] 可以获取指定的第 i 个元素 ;

3、案例核心要点 - 实现策略

总共三个 <button> 按钮 , 通过 document.getElementsByTagName('button') 可以获取这三个按钮 ;

互斥按钮效果 , 按下任意一个按钮之后 , 把三个按钮都设置为默认的状态 , 然后再将本次点击的按钮设置为高亮状态 ;

在循环中 , 设置该效果 :

        // II. 为每个 按钮 设置点击事件 , 每个点击事件都是设置所有按钮为默认背景 , 本按钮高亮显示
        // buttons 是 NodeList 对象 , 该对象是 伪数组 
        // 可使用数组下标获取每个 按钮元素
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].onclick = function() {
                // 1. 设置所有按钮的背景为默认背景
                for (var i = 0; i < buttons.length; i++) {
                    // 设置默认背景
                    buttons[i].style.backgroundColor = '';
                }
                // 2. 设置本按钮的背景为高亮显示
                this.style.backgroundColor = 'green';
            }
        }

4、完整代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Style Operation Example</title>
    <style>
        * {
            /* 取消默认内外边距样式 */
            margin: 0;
            padding: 0;
        }
        
        div {
            /* 设置宽度即可 , 高度使用内部的 子元素自动填充 */
            width: 300px;
            margin: 100px auto;
        }
        
        button {
            /* 设置按钮样式 , 左浮动从左到右头放置 */
            float: left;
            width: 80px;
            height: 50px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
    </div>

    <script>
        // I. 获取所有 button 标签元素
        // getElementsByTagName 函数 的 返回值是 NodeList 对象 , 
        var buttons = document.getElementsByTagName('button');

        // II. 为每个 按钮 设置点击事件 , 每个点击事件都是设置所有按钮为默认背景 , 本按钮高亮显示
        // buttons 是 NodeList 对象 , 该对象是 伪数组 
        // 可使用数组下标获取每个 按钮元素
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].onclick = function() {
                // 1. 设置所有按钮的背景为默认背景
                for (var i = 0; i < buttons.length; i++) {
                    // 设置默认背景
                    buttons[i].style.backgroundColor = '';
                }
                // 2. 设置本按钮的背景为高亮显示
                this.style.backgroundColor = 'green';
            }
        }
    </script>
</body>

</html>

运行效果 :

进入后 , 默认状态如下 :