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+"毫秒";
    }