Web APIs 学习归纳3---元素操作的补充

上一节也学习了一些有关元素操作的内容，主要集中在样式、属性、内容的修改。

一、元素操作的经典案例和思想

1.1 排他思想（排除他人、保留自己）

这个内容很重要，一般情况下如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法。

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

案例1：点击的按钮变色，其余的恢复原样

案例分析：1、获取所有的button按钮，使用getElementTagName（），返回集合。2、利用循环对每一个button绑定事件。3、每一个事件内部处理时，先遍历所有的button让所有的backgroundcolor = '' ；在对自己的 this.backgroundcolor设置为想要的颜色；

javascript 复制代码

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素 注意这里得到也是数组
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]

        for (let i = 0; i < btns.length; i++) {

            btns[i].onclick = function () {
                for (let j = 0; j < btns.length; j++) {
                    btns[j].style.backgroundColor = '';
                }

                this.style.backgroundColor = 'red'
            }

        }
        //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为---排他思想
    </script>
</body>

1.2 鼠标经过案例

案例：鼠标在某一行，这一行会改变自己的背景颜色，当鼠标离开时就会变回原来的样子。

案例分析：1、获取所有tbody下的tr；2、循环为每一个tr设置事件，鼠标经过 onmouseover，可以通过className添加类；3、循环为每一个re设置事件，鼠标离开 onmouseout ，将className 设置为空。

html 复制代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        thead tr {
            height: 30px;
            background-color: skyblue;
        }

        tbody tr {
            height: 30px;
        }

        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }

        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (let i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function () {
                this.className = 'bg'
            }
            // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function () {
                this.className = ''
            }
        }
    </script>
</body>

1.3 全选反选案例

案例分析：1、获取全选的按钮、获取单选的所有按钮。2、绑定全选按钮的事件，如果点击了onclick，那么利用循环把单选的所有的checked的值都设置的和全选按钮的一样。3、绑定单选按钮的事件，通过循环实现，每一个单选按钮中都需要做一次全部单选按钮的循环，如果有一个单选按钮的值为 false，那么设置全选的checked属性为false。

html 复制代码

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        var btn_all = document.getElementById('j_cbAll');
        console.log(btn_all);
        var ccbs = document.getElementById('j_tb').getElementsByTagName('input');
        console.log(ccbs);
        // 注册事件
        btn_all.onclick = function () {

            for (let i = 0; i < ccbs.length; i++) {
                ccbs[i].checked = this.checked;
            }
        }
        // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        for (let j = 0; j < ccbs.length; j++) {

            ccbs[j].onclick = function () {
                for (let i = 0; i < ccbs.length; i++) {
                    if (!ccbs[i].checked) {
                        btn_all.checked = false;
                    }

                }
            }

        }




    </script>
</body>

</html>

二、自定义属性的操作

我们以前都是直接使用：元素.内置属性；这样的方式去设置、调用元素的内置属性。但是现时使用中可能会出现需要使用不是内置属性的情况，需要我们自己去设置一些自定义的属性，同时实现自定义属性的赋值，调用，删除。

注意：一下方法不止适用于自定义类型，一样适用于内置属性！！！

2.1 自定义属性的设置

调用方法：element.setAttribute('属性', '值');

2.2 自定义属性的调用

调用方法： element.getAttribute('属性')

2.3 自定义属性的删除

调用方法： element.removeAttribute('属性')

2.4 点击切换tab栏案例（重点）

想要实现点击不同的位置显示不同的内容

案例分析：1、上方使用ul+li的方式实现，li设置为浮动。2、设置一个类，用于改变选中导航栏的背景。3、设置对应的模块的显示界面。4、获取所有的导航栏的li，获取所有的显示界面。5、使用循环对两者进行一对一的绑定操作，使用循环对两者添加相同的自定义属性和值，保证一一对应。5、并在循环中设置li的点击事件，使用排他思想把所有人的背景变成普通，然后设置自己的背景。6、同时利用排他思想，把所有显示模块都设置为隐藏，然后获取li的自定义属性的值，传递给显示模块，设置对应的模块为block。

html 复制代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        // 获取元素
        var lis = document.querySelector('.tab_list').querySelectorAll('li');
        var items = document.querySelector('.tab_con').querySelectorAll('.item');
        // for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i);
            items[i].setAttribute('index', i);

            lis[i].onclick = function () {

                for (let i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }

                this.className = 'current';

                for (var i = 0; i < lis.length; i++) {
                    items[i].style.display = 'none';
                }
                var index = this.getAttribute('index');
                items[index].style.display = 'block';
            }
        }
    </script>
</body>

</html>

2.5 H5的自定义属性

h5新增的获取自定义属性的方法它只能获取data-开头！！

dataset 是一个集合里面存放了所有以data开头的自定义属性！！！

javascript 复制代码

        console.log(div.dataset);
        console.log(div.dataset.index);

        //获取的是data-index

        console.log(div.dataset['index']);

注意：如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法

javascript 复制代码

        //如果含有连字符 是data-list-name

        console.log(div.dataset['listName']);