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);//我是文本