JavaScript WebAPI 系列二 排他思想；自定义属性（包括h5新增的data-）；父、子、兄弟节点；创建、添加、删除、复制节点

1.0 操作元素–排他思想

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

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

        // 1. 获取所以按钮元素
        var btns = document.getElementsByTagName('button');
        //  btns 得到的是伪数组 里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
   
            btns[i].onclick = function() {
   
                // 1. 我们先把所以的按钮背景颜色去掉，    干掉所有人
                for (var j = 0; j < btns.length; j++) {
   
                    btns[j].style.backgroundColor = 'white';
                };
                // 2. 然后才让当前的元素背景颜色为pink ， 留下我自己
                this.style.backgroundColor = 'pink';
            }
        }

		案例一：案例：百度换肤
		var imgs = document.querySelector('.baidu').querySelectorAll('img');
        for (var i = 0; i < imgs.length; i++) {
   
            imgs[i].onclick = function() {
   
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }

		案例二：案例：表格隔行变色
		1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('.bodys').querySelectorAll('tr');
        2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
   
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseenter = function() {
   
                    this.className = 'bg';
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
   
                this.className = '';
            }
        }
		
		案例三：案例：表单全选取消全选案例
		var inputAll = document.querySelector('#j_cbAll');
        var input = document.querySelector('#j_tb').querySelectorAll('input');
        1. 让下面所以复选框的checked属性 跟随 全选按钮
        inputAll.onclick = function() {
   
                // this.checked  他可以得到当前复选框的选中状态 如果是 true 就是选中， false 就是未选中
                for (var i = 0; i < input.length; i++) {
   
                    input[i].checked = this.checked;
                }
            }
        2. 下面复选框需要全部选中， 上面全选才能选中的做法：给下面所以复选框绑定点击事件，每次点击都要循环。
        for (var i = 0; i < input.length; i++) {
   
            input[i].onclick = function() {
   
                // 添加一个变量 flag  控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查 4个 小按钮是否被选中
                for (var i = 0; i < input.length; i++) {
   
                    if (!input[i].checked) {
   
                        flag = false;
                        break; // 退出for循环 这样可以提高执行效率，因为只要有了一个没有被选中，flag = false ； 剩下的就可以不要再运行了
                    }
                }
                inputAll.checked = flag;
            }
        }

1.1 自定义属性的操作

1.获取属性值：

1. element.属性 （获取内置属性值（元素本身自带的属性））
2. element.getAttribute(‘属性’); （主要获得自定义的属性 （标准） 我们程序员自定义的属性）

2.设置属性值：

1. element.属性 = ‘值’ （设置内置属性值）
2. element.setAttribute(‘属性’, ‘值’); （主要设置自定义的属性 （标准））

3.移除属性：

1. element.removeAttribute(‘属性’);