1.排他思想

• 只有自己改变，其他同类不变
• 代码说明：

		//任意点击一个按钮，颜色发生变化，其他不变
        //1、获取所有按钮
        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {//这个循环是为了绑定事件，并不是双重循环
            btns[i].onclick = function () {
                //先把所有的按钮颜色去掉   去掉所有人，包括自己
                for(var j = 0;j < btns.length;j++){
                    btns[j].style.backgroundColor = '';
                }
                //然后给想要的按钮设置颜色  让自己复活
                this.style.backgroundColor = 'pink';
                //btns[i].style.backgroundColor = 'pink';是错的，因为循环结束时，i是5，会显示undefined
            }
        }

2.表单全选与取消

• 列表都被选中时，自动全选；；取消其中一个，全选自动取消
• 代码说明：

		var j_cbAll = document.getElementById('j_cbAll');
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
        j_cbAll.onclick = function () {
            for (var i = -0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked; //全选
            }
        }
        for(var i = 0; i < j_tbs.length;i++){
            j_tbs[i].onclick = function(){
                var flag = true;//true代表全选中    false代表有的没选中
                for(var i = 0; i<j_tbs.length;i++){
                    if(!j_tbs[i].checked){
                        flag = false;
                        break;
                    }
                }
                j_cbAll.checked = flag;
            }
        }

3.自定义属性

• 程序员自己添加的属性被称为自定义属性
• h5中自定义属性有规范：自定义属性以“data-属性名”

3.1获取元素属性

1. element.属性 ，只能获取固有属性
2. element.getAttribute(‘属性’) ，获取自定义属性值
3. elment.dataset.属性名 ，h5中提供了自定义属性获得的新方式

3.2设置属性值

1. element.属性 = ‘值’
2. element.setAttribute(‘属性’,‘值’)

3.3移除属性

• element.removeAttribute(属性)

3.4 案例展示

		var lis = document.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        for (var i = 0; i < lis.length; i++) { //for循环绑定点击事件
            lis[i].setAttribute('data-index', i); // lis[i].index=i;给每个li设置自定义属性，属性值就是索引号
            lis[i].onclick = function () {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].classList.remove('current');
                }
                this.classList.add('current');
                var index = this.getAttribute('data-index');
                for (var j = 0; j < items.length; j++) {
                    items[j].style.display = 'none';
                }
                items[index].style.display = 'block';
            }
        }

4.节点

• 节点（node），至少拥有 nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）
• 节点类型：元素节点（1）、属性节点（2）、文本节点（3）文本节点包括文字、空格、换行等

4.1父节点

• parentnode，得到离元素最近的父级节点，如果找不到，就返回空null

4.2子节点

• childNodes，返回所有子节点的集合，包含：元素节点、文本节点、属性节点 ，该集合为即时更新的集合，一般不提倡使用
• children，获得所有子元素节点，返回一个伪数组，常用
• firstchild / lastchild ,返回所有子节点的第一个或最后一个
• firstElementChild / lastElementChild ，返回子元素节点的第一个或最后一个，有兼容性问题
• children[0] / children[.children.length-1] ,实际开发写法，利用了数组的索引号

4.3兄弟节点

• nextElementSibling / previousElementSiblinbg ， 并不常用

4.4添加新的元素

1. 创建节点，document.createElement(‘tagName’)
2. 添加节点
   - node.appendChild(child),是在父级末尾后面添加元素，类似于数组中的push
   - node.insertBefore(child,指定元素) 将节点添加到指定元素的前面

4.5删除节点

• node.removeChild(child),删除子节点
• 子节点.remove，删除自己

4.6复制节点（克隆节点）

• node.cloneNode()
  1. ( )为false或空时，浅拷贝，只复制标签不复制内容
  2. （ ）为true时，深拷贝，复制标签及内容

5.相关案例

• 简单发布留言案例

		var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        btn.onclick = function () {
            if (text.value.trim() === '') {//输入空格也会判断没有内容   trim将字符串的空格删掉
                alert('您没有输入内容');
                return false;
            } else {
                var li = document.createElement('li');
                li.innerHTML = text.value;
                ul.insertBefore(li, ul.children[0]);
                text.value = '';//发布一条之后内容为空
            }
        }

• 动态生成表格案例

		//1、先准备好要创建的数据
        var datas = [{
                name: '魏璎珞',
                subject: 'javascript',
                score: '100',
            },{
                name: '傅恒',
                subject: 'javascript',
                score: '90',
            },{
                name: '弘历',
                subject: 'javascript',
                score: '80',
            },{
                name: '明玉',
                subject: 'javascript',
                score: '70',
            }];
        //2、往tbody里面创建行  通过数组的长度知道有几行
        var tbody = document.querySelector('tbody');//获取父节点
        for (var i = 0; i < datas.length; i++) {//外层循环控制行tr
            //创建tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //行里面创建单元格  单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
            for(var k in datas[i]){//里面的for循环控制列td
                var td = document.createElement('td');
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            var td = document.createElement('td');
            td.innerHTML = '<a href="jacascript:;">删除</a>';
            tr.appendChild(td);
        }
        var as = document.querySelectorAll('a');
        for(var i = 0;i<as.length;i++){
            as[i].onclick = function(){
                // tbody.removeChild(this.parentNode.parentNode)
                this.parentNode.parentNode.remove();
            }
        }