JS13

补充：
一**、获取元素得到的是一个【伪数组】**
伪数推荐使用foreach()方法
对象里面推荐使用 for in 、for of
伪数组怎么变成真数组？

二、for 和 foreach()区别
1）for的循环是靠i++ 来推动的，也是不停的改变i的值 【需要使用自定义属性index】
2）foreach()的循环是【能生成新的i来循环】的【所以选项卡推荐使用foreach 不需要自定义属性】
语法foreach(function(val,i){})

一、重点：认识节点和元素

案例：人员卡（重点）
案例：隔行变色表格

认识节点:文本，注释，标签，属性
元素：标签 (每一个元素都是对象 )

1.节点操作

1.childNodes 子节点列表里面 (空格跟注释也算节点)
2.children (输出是元素)

nodetype 节点类型 （返回节点的类型是一个数字）
标签nodetype： 节点值1
标签nodeValue： 返回是null
标签nodeName： 标签

属性nodetype： 节点值2
属性nodeValue： 返回是文本内容
属性nodeName： 属性

文本nodetype： 节点值3
文本nodeValue： 返回是文本内容
文本nodeName： 返回#text

注释nodetype： 节点值8
注释nodeValue： 返回是注释内容
注释nodeName： 返回#comment

2.元素的查找

1.）查找父元素
ele.parentNode 找最近的节点

2.）查找子元素
ele.childNodes 找节点
ele.children 找元素
ele.firstChild 第一个子节点
ele.firstElementChild 第一个子元素
ele.lastChild 最后一个子节点
ele.lastElementChild 最后一个子元素

3.）查找同级元素
同级前面一个节点 previousSibling
同级后面一个 节点nextSibling
前面一个元素previousElementSibling (只能找到一个only one)
后面一个元素nextElementSibling

3.元素的一些方法

元素删除方法
1）元素.innerHTML = ‘’;空字符 注意会删掉 所有的子节点
2）元素.removeChild() 【指定删除一个子元素】 不能删除父元素
3) 元素.parsentNode.remove() 【删除最近的父节点】

元素的修改方法
replaceChild(new,old) //注意这里是新换旧

元素新增方法
document.creatElement('标签') //创建标签
document.creatTextNode('哦哦哦') //创建内容

元素插入方法
insertBefore（new,old） 在前面插入 DOM里面很多是新换旧
appendChild 在后面追加 append附加

元素的复制方法
cloneNode(true); 里面写true的话就是【标签及内容】都复制
cloneNode(false); 只复制标签 不复制内容 false也可以不写

案例1：人员选项卡

     难点：
        1、flag  只有在编辑按钮状态下  flag=false(编辑确定)
        2、this 如何保存编辑状态下值呢？       
        */
        var flag = true//假设是新增状态（新增确定）
        var _this; //保存this的值
        // 获取
        var addbtn = document.querySelector('.add');
        var shadow = document.querySelector('.shadow');
        var conbtn = document.querySelector('.subBtn');
        var canbtn = document.querySelector('.cancelBtn');
        var inp1 = document.querySelector('#user');
        var inp2 = document.querySelector('#pwd');
        var tb = document.querySelector('.userlist')//获取tbody

        // 新增按钮
        addbtn.onclick = function () {
            shadow.style.display = 'block';
        }

        // 【确认框需要分为：新增确认、编辑确认】
        conbtn.onclick = function () {
            if (flag == true) {
                addInfo();//调用新增函数
            } else {
                editInfo(); //调用编辑函数
            }
        }

        // 取消按钮(shadow消失 2个输入框都清零)
        canbtn.onclick = function () {
            shadow.style.display = 'none';
            inp1.value = '';
            inp2.value = '';
            flag = true;
        }

        // 编辑函数
        function editInfo() {
            var username = inp1.value;
            var userpwd = inp2.value;
            shadow.style.display = 'none';
            inp1.value = '';  //编辑完毕清零
            inp2.value = '';  //编辑完毕清零
            flag = true;

            // 把遮罩层的输入框的值赋值给td
_this.previousSibling.previousSibling.innerHTML=username;
_this.previousSibling.innerHTML=userpwd;
        }
        // 新增函数
        function addInfo() {
            var username = inp1.value;
            var userpwd = inp2.value;

            // 新增确定 并且把2个输入框值清零，不然下一次进去还有前一次输入的数字
            shadow.style.display = 'none';
            inp1.value = '';
            inp2.value = '';

            var tr = document.createElement('tr');

            var td1 = document.createElement('td');
            var text1 = document.createTextNode(username); //注意创建文本内容的方法
            td1.appendChild(text1);
            tr.appendChild(td1);

            var td2 = document.createElement('td');
            var text2 = document.createTextNode(userpwd);
            td2.appendChild(text2);
            tr.appendChild(td2);

            var td3 = document.createElement('td');
            var text3 = document.createTextNode('编辑');
            td3.appendChild(text3);
            tr.appendChild(td3);

            var td4 = document.createElement('td');
            var text4 = document.createTextNode('删除');
            td4.appendChild(text4);
            tr.appendChild(td4);

            // tr添加到tbody身上
            tb.appendChild(tr);

            // 删除按钮 删除tr
            td4.onclick = function () {
                this.parentNode.remove();
            }

            // 编辑按钮
            td3.onclick = function(){
                shadow.style.display='block';
                inp1.value=this.previousSibling.previousSibling.innerHTML;
                inp2.value=this.previousSibling.innerHTML;
                flag = false;//默认是新增确定 编辑写false显示是编辑确定状态
                _this = this;
            }
        }
    </script>

案例：隔行变色表格

   // 获取body
        var bd =document.querySelector('body');
        // 创建表格
        var tab = document.createElement('table');
        bd.appendChild(tab);

        // 创建tr
        for(var i = 0;i<6;i++){
            var tr = document.createElement('tr');
            // 创建td
            for(var j = 0;j<8;j++){
                var td = document.createElement('td');
                // 创建文本内容
                var text = document.createTextNode('好好学习，加油吧');
                td.appendChild(text);
                tr.appendChild(td);
                // 隔行换色
                if(j%2==0){
                    td.style.background='red';
                }else{
                    td.style.background='green';
                }

            }
            tab.appendChild(tr);
        }