DOM

DOM详解
1.1 DOM案例
0.显示二维码（导航栏，开关灯）
var a = document.getElementsByTagName(“a”)[0];
var er = document.getElementById(“er”);
a.onmouseover = function () {
er.className = ” show”;
}
a.onmouseout = function () {
er.className = ” hide”;
er.className = er.className.replace(“show”,”hide”);
}
1.禁用文本框和获取失去焦点输入事件。
2.表单处理。Input取值赋值和select选水果。

        var btn = document.getElementById("btn");        var opArr = document.getElementsByTagName("option");        btn.onclick = function () {            opArr[3].selected = true;        }

3.验证账号密码，高亮显示。
var inp1 = document.getElementsByTagName(“input”)[0];
var span1 = document.getElementsByTagName(“span”)[0];

    inp1.onblur = function () {        if(this.value.length === 0){            return;        }        if(this.value.length < 6 || this.value.length > 10){            this.className = "wrong";            span1.innerHTML = "您输入的内容必须为6-10位！"        }else{            this.className = "";            span1.innerHTML = "";        }    }

4.全选反选
var theadInp = document.getElementById(“theadInp”);
var tbody = document.getElementById(“tbody”);
var inpArr = tbody.getElementsByTagName(“input”);

        theadInp.onclick = function () {            for(var i=0;i<inpArr.length;i++){。                if(true == this.checked){                    inpArr[i].checked = true;                }else{                    inpArr[i].checked = false;                }            }            for(var i=0;i<inpArr.length;i++){                inpArr[i].checked = this.checked;            }        }        for(var i=0;i<inpArr.length;i++){           inpArr[i].onclick = function () {                for(var j=0;j<inpArr.length;j++){                    if(false === inpArr[j].checked){                        theadInp.checked = false;                        return;                    }                }                theadInp.checked = true;            }        }        for(var i=0;i<inpArr.length;i++){            inpArr[i].onclick = function () {                var flag = true;                for(var j=0;j<inpArr.length;j++){                    if(false === inpArr[j].checked){                        flag = false;                    }                }                theadInp.checked = flag;            }        }

1.2 属性获取修改和删除（属性绑定）
1.teb栏。（排他思想）（简单写法和兼容写法）
1.点亮盒子。
var liArr = document.getElementsByTagName(“li”);

        for(var i=0;i<liArr.length;i++){            liArr[i].onmouseover = function () {               排他思想：干掉所有人，剩下我自己。                for(var j=0;j<liArr.length;j++){                    liArr[j].className = "";                }                this.className = "current";            }        }    2.弹出索引值。        var liArr = document.getElementsByTagName("li");        for(var i=0;i<liArr.length;i++){               liArr[i].aaaaa = i;            liArr[i].index = i;            liArr[i].onmouseover = function () {                alert(this.aaaaa);                alert(this.index);            }        }        3.属性绑定。        4.两个for循环变一个

2.自定义属性（兼容写法）
1.直接绑定属性：不会再标签中显示（没有的属性）；
2.标签中的自定义属性，不能box.aaa获取
（火狐谷歌IE9+）(IE678可以获取)
3.get/setAttribute（）；可以
1.3 节点关系。（父节点、兄弟节点、子节点、所有子节点）
1.子节点。（京东头）
2.nodeType/nodeName/nodeValue:
元素/属性/文本 123/标签:属性名:#text/null:属性值:内容
3.childNodes实现各行变色index = 0;
4.父节点/所有子节点/兄弟节点
1.3.1 隔行变色

        var btn = document.getElementsByTagName("button")[0];        var ul = btn.nextElementSibling;        var liAndTextArr = ul.childNodes;        btn.onclick = function () {                           var arr = [];。            for(var i=0;i<liAndTextArr.length;i++){                if(liAndTextArr[i].nodeType === 1){                    arr[arr.length] = liAndTextArr[i];                }            }            //各行变色            for(var j=0;j<arr.length;j++){                if(j%2===1){                    arr[j].style.backgroundColor = "red";                }else{                    arr[j].style.backgroundColor = "#ccc";                }            }        }

nodeType与nodeName与nodeValue

//nodeType
console.log(“我是nodeType值”);
console.log(ele.nodeType);//1
console.log(att.nodeType);//2
console.log(txt.nodeType);//3
//nodeName
console.log(“我是nodeName值”);
console.log(ele.nodeName);//DIV
console.log(att.nodeName);//id
console.log(txt.nodeName);//#text
//nodeValue
console.log(“我是nodeValue值”);
console.log(ele.nodeValue);//null
console.log(att.nodeValue);//box
console.log(txt.nodeValue);//我是文本