JS的Dom和事件处理机制（ 二）

一、节点获取和访问关系

 //parentNode父盒子    var box3 = document.getElementById("box3");    box3.parentNode.style.backgroundColor = "blue";    //兄弟节点（前一个和后一个：previousSibling和nextSibling）    //previousElementSibling和nextElementSibling在IE678中不支持。IE678不能获取文本节点。//    box3.previousElementSibling.style.backgroundColor = "red";//    box3.nextElementSibling.style.backgroundColor = "yellow";//    box3.previousSibling.style.backgroundColor = "red";//    box3.nextSibling.style.backgroundColor = "yellow";    var pre = box3.previousElementSibling || box3.previousSibling;    var net = box3.nextElementSibling || box3.nextSibling;    pre.style.backgroundColor = "red";    net.style.backgroundColor = "yellow";    //单个子元素（firstChild和lastChild）//    box3.parentNode.firstElementChild.style.backgroundColor = "orange";//    box3.parentNode.lastElementChild.style.backgroundColor = "green";    var first = box3.parentNode.firstElementChild || box3.parentNode.firstChild;    var last = box3.parentNode.lastElementChild || box3.parentNode.lastChild;    first.style.backgroundColor = "orange";    last.style.backgroundColor = "green";    //所有子元素    var arr = box3.parentNode.children;    for(var i=0;i<arr.length;i++){        arr[i].style.backgroundColor = "black";    }    console.log(box3.parentNode.childNodes);    var arr2 = box3.parentNode.childNodes;    for(var i=0;i<arr2.length;i++){        if(arr2[i].nodeType === 1){            console.log(arr2[i]);        }    }    //随意获取指定兄弟节点    var index = 0;    var node = box3.parentNode.children[index];    //获取所有的兄弟节点    function siblings(elm) {        var a = [];        var p = elm.parentNode.children;        for(var i =0;i<p.length;i++) {            if(p[i] !== elm) {                a.push(p[i]);            }        }        return a;    }

二、隔行变色

        //需求：让tr各行变色，鼠标放入tr中，高亮显示。        //1.隔行变色。        var tbody = document.getElementById("target");        var trArr = tbody.children;        //循环判断并各行赋值属性（背景色）        for(var i=0;i<trArr.length;i++){            if(i%2!==0){                trArr[i].style.backgroundColor = "#a3a3a3";            }else{                trArr[i].style.backgroundColor = "#ccc";            }            //鼠标进入高亮显示            //难点：鼠标移开的时候要回复原始颜色。            //计数器（进入tr之后，立刻记录颜色，然后移开的时候使用记录好的颜色）            var color = "";            trArr[i].onmouseover = function () {                //赋值颜色之前，先记录颜色                color = this.style.backgroundColor;                this.style.backgroundColor = "#fff";            }            trArr[i].onmouseout = function () {                this.style.backgroundColor = color;            }        }

三、dom元素的创建

  //第一种创建方式：document.write();    document.write("<li>我是document.write创建的</li>");    var btn = document.getElementsByTagName("button")[0];    var ul = document.getElementsByTagName("ul")[0];   // btn.onclick = function () {   //     document.write("<li>我是document.write创建的</li>");   // }    //第二种：直接利用元素的innerHTNL方法。（innerText方法不识别标签）    ul.innerHTML += "<li id='li1'>我是innerHTML创建的</li>"    //第三种：利用dom的api创建元素    var newLi = document.createElement("li");    newLi.innerHTML = "我是createElement创建的";//    console.log(newLi);    //在父元素的最后面添加元素。//    ul.appendChild(newLi);    //指定位置添加    var li1 = document.getElementById("li1");    ul.insertBefore(newLi,li1);

四、百度搜索

 //需求：输入内容(输入事件，键盘弹起事件)，模拟服务器获取内容，创建ul，并在其中显示。        //步骤：        //1.获取事件源        //2.绑定事件        //3.书写事件驱动程序        //1.获取事件源        //模拟服务器获取内容        var arr = ["a","ab","abc","abcd","aa","aaa"];        var box = document.getElementsByTagName("div")[0];        var inp = box.children[0];//        var inp = document.getElementsByTagName("input")[0];        //2.绑定事件(输入内容(输入事件，键盘弹起事件))        inp.onkeyup = function () {            //创建一个字符串，里面添加满了li和对应的内容。            var newArr = [];            //我要从数组中查询以input中输入内容为开头的信息，然后添加到li中，转换成字符串。            //遍历老数组，然后判断每一项，哪项是以input内容为开头的穿件一个li，塞进去。            for(var i=0;i<arr.length;i++){                //判断当前项，是否已input内容为开头                //获取输入内容input标签的value属性值。                var val = this.value;                if(arr[i].indexOf(val)===0){                    newArr.push("<li>"+arr[i]+"</li>");                }            }            var str = newArr.join("");            //Bug1.每次创建新的ul之前，先删除旧的ul            //只有ul存在我们才能删除ul//            var aaa = box.getElementsByTagName("ul")[0];            if(box.children[2]){                 //只要存在，那么就是object，object类型的数据，只要不是null,对应的boolean值都是true；                box.removeChild(box.children[2]);            }            //Bug2.如果input中内容为空，那么久不能在生成ul了。            //如果input为空，那么切断函数            //Bug3.如果arr数组中没有以input为开头的元素。那么切断函数            //newArr的长度为0，就能证明以input内容为开头的元素，在arr中不存在            if(this.value.length === 0 || newArr.length === 0){                //切断函数(不在产生新的ul)                return;            }            //3.书写事件驱动程序            var ul = document.createElement("ul");            //把创建好的内容添加到ul中。            ul.innerHTML = str;            box.appendChild(ul);        }

五、倒计时

var div=document.getElementsByTagName("div")[0];    var timer = setInterval(fn,1);    function fn(){        var nowtime = new Date();        var future = new Date("2016/09/05 18:23:15");        var timeSum = future.getTime() - nowtime.getTime();        var day = parseInt(timeSum/1000/60/60/24);        var hour = parseInt(timeSum/1000/60/60%24);        var minu = parseInt(timeSum/1000/60%60);        var sec = parseInt(timeSum/1000%60);        var millsec = parseInt(timeSum%1000);        day=day<10?"0"+day:day;        hour=hour<10?"0"+hour:hour;        minu=minu<10?"0"+minu:minu;        sec=sec<10?"0"+sec:sec;        if(millsec<10){            millsec="00"+millsec;        }else if(millsec<100){            millsec="0"+millsec;        }////        console.log(day);//        console.log(parseInt(timeSum/1000/60/60/24));        if(timeSum<0){            div.innerHTML="距离苹果发布会还有00天00小时00分00秒000毫秒";            clearInterval(timer);            return;        }        div.innerHTML="距离苹果发布会还有"+day+"天"+hour+"小时"+minu+"分"+sec+"秒"+millsec+"毫秒";    }