Web API（二）排他思想和自定义属性

Web API（二）排他思想和自定义属性

一、排他思想

1、定义

如果有同一组元素，想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

2、案例

• 按钮案例、

 // 需求：点击5个按钮中的任意一个按钮，当前按钮变粉色，其他按钮正常
        //获取当前元素
        var btns = document.querySelectorAll('button');
        // 遍历伪数组
        for (var i = 0; i < btns.length; i++) {
            // 使用索引号取出单个按钮，绑定事件
            btns[i].onclick = function() {
                // 先清除所有按钮样式
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // 再设置自己的样式，改变当前按钮样式
                // this不能换成btns[i]， 这里的i值变成了5， 会报错
                // 外层循环也会调用，先执行外层循环，在执行事件
                this.style.backgroundColor = 'skyblue';
            }
        }
    </script>

• 百度换肤、

// 需求：点击不同的图片，body 的背景图同步发生改变
        // 思路：当点击小图片的时候，获取到当前图片的路径，并且设置给 body 上的 backgroundImage
        // 获取元素
        var imgs = document.querySelectorAll('img');
        var body = document.body;
        // for 循环遍历所有图片
        for (var i = 0; i < imgs.length; i++) {
            // 绑定事件
            imgs[i].onclick = function() {
                // 设置给body上的backgroundImage ，this.src图片的路径
                body.style.backgroundImage = 'url(' + this.src + ')'

            }
        }

• 表格隔行变色、

  // 案例需求：数据表格需要隔行变色的样式进行展示
        // 思路： 给 tbody 中的每个 tr 绑定鼠标经过和离开事件，在事件处理函数中修改对应 tr 上的背景颜色
        // 获取元素
        var trs = document.querySelectorAll('tbody>tr');
        console.log(trs);
        // 遍历元素
        for (var i = 0; i < trs.length; i++) {
            // 鼠标经过，行背景色变色
            trs[i].onmouseover = function() {
                    this.style.backgroundColor = 'skyblue';
                }
                // 鼠标经过，行背景色变为原来颜色
            trs[i].onmouseout = function() {
                this.style.backgroundColor = '';
            }
        }

• 全选案例

   // 分析思路
        // 1. 点击上面的全选按钮
        // 2. 下面的分选按钮状态和全选按钮的状态保持一致
        // 3. 点击下面的分选按钮
        // 4. 核心：如何判断下面每个按钮都选中 ---> ( flag思想 ) 至少有一个按钮没有被选中
        // 5. 设置上面全选按钮的状态
        var main = document.querySelector('#mainCheckBox');
        var rest = document.querySelectorAll('.restCheckBox');
        // 绑定事件
        main.onclick = function() {
                // 获取当前按钮选中状态
                var state = main.checked;
                console.log(state); //true或false
                // 遍历rest
                for (var i = 0; i < rest.length; i++) {
                    // 给取出的每个按钮设置选中状态， 和全选按钮状态一致
                    rest[i].checked = state;
                }
            }
            //给每个分选按钮绑定事件
        for (var i = 0; i < rest.length; i++) {
            rest[i].onclick = function() {
                // 先设定一个flag变量
                var flag = true; //true表示全选；false表示非全选（至少一个以上未选中）.

                // 遍历每个分选按钮
                for (var i = 0; i < rest.length; i++) {
                    // 获取每个分选按钮是否选中
                    var state = rest[i].checked;

                    // 一旦有一个未选中
                    if (state == false) {
                        // 更新flag变量，改选为非全选状态
                        flag = false;
                        break;
                    }
                }
                console.log(flag);
                // 设置全选按钮状态
                main.checked = flag;
            }

        }

二、自定义属性操作

1、获取属性值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZoH2RprG-1616981014708)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第二天\iamges\1550915376339.png)]

2、设置属性值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p68hUzmZ-1616981014711)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第二天\iamges\15509145026.png)]

3、移除属性值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6TAPdPJb-1616981014711)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第二天\iamges\1550915513137.png)]

4、H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’) 获取。

条件: 自定义属性名必须用 data- 开头

ele.dataset['index']//获取
ele.dataset['index']='123'//修改

三、节点操作

1、节点概述

• 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

• HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IHueFTIQ-1616981014713)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第二天\iamges\1550970986988.png)]

2、父级节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bcP4QU6O-1616981014714)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第二天\iamges\1550971196686.png)]

3、子节点

所有子节点（了解）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IZYn3uIV-1616981014715)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第二天\iamges\1550971263925.png******)]

子元素节点（掌握）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q06BLzqm-1616981014716)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第二天\iamges\1550971325828.png)]

返回的是伪数组，可以用索引号访问子元素节点

• 获取上一个兄弟元素

ele.previousElementSibling

获取下一个兄弟元素

ele.nextElementSibling

• 首尾元素

ele.firstElementChild

ele.children[0]（优先试用）

ele.lastElementChild

ele.children[ele.children.length - 1]（优先试用）

• 创建一个元素 div span li

document.createElement(‘标签名’)

• 追加元素

parent.appendChild(ele)

parent.insertBefore(ele, 指定的位置)