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

一、

1.事件源（引发后续事件的标签）

 2.事件（js已经定义好，直接使用）

 3.事件驱动程序（对样式和html的操作）（DOM操作）

1.获取事件源（document.getElementById("box")）

2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）

3.书写事件驱动程序。

   //1.获取事件源（document.getElementById("box")）
    var div = document.getElementById("box");
    //获取事件源(一共五种)
//    var arr1 = document.getElementsByTagName("div");
//    var arr2 = document.getElementsByClassName("leiming");
    //不掌握
//    var arr3 = document.getElementsByName("aaa");


    //2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）
    //1.匿名绑定
    div.onclick = function () {
        //3.书写事件驱动程序。
//        alert(1);
        //可以操作标签的属性和样式。
        div.className = "aaa";
//        div.style.width = "200px";
//        div.style.height = "200px";
//        div.style.backgroundColor = "red";
    }

    //不能写写括号，否则成为了返回值（2.用函数名绑定）
//    div.onclick = fn;
//
//    function fn() {
//        //3.书写事件驱动程序。
//        alert(1);
//    }

//
//    //3.行内绑定
//    function fn(){
//        alert(1);
//    }

二、

    //什么条件下触动这个事件呢？页面加载（文本和图片）完毕的时候。
    //用途
    //js的加载时和html同步加载的。（如果使用元素在定义元素之间，容易报错。）
    //整个页面上所有元素加载完毕在执行js内容
    //window.onload可以预防使用标签在定义标签之前。
    window.onload = function () {
        var aaa = document.getElementById("box");
        console.log(aaa);
        aaa.style.width = "100px";
    }

三、

 window.onload = function () {
            //需求：鼠标放到img上，修改路径（src的值）。
            //步骤：
            //1.获取事件源
            //2.绑定事件
            //3.书写事件驱动程序

            //1.获取事件源
            var img = document.getElementById("box");
            //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
            img.onmouseover = function () {
                //3.书写事件驱动程序(修改src)
                img.src = "image/jd2.png";
//                this.src = "image/jd2.png";
            }


            //1.获取事件源
            var img = document.getElementById("box");
            //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
            img.onmouseout = function () {
                //3.书写事件驱动程序(修改src)
                this.src = "image/jd1.png";
            }

            //获取事件源（元素可以不获取直接使用id的值）
//            var img = document.getElementById("box");
//            //调用函数
//            img.onmouseover = fn1;
//            img.onmouseout = fn2;
//            //定义函数
//            function fn1() {
//                img.src = "image/jd2.png";
//            }
//            function fn2() {
//                img.src = "image/jd1.png";
//            }

//1.获取事件源和相关元素
    var closeBanner = document.getElementById("closeBanner");
    var topBanner = document.getElementById("topBanner");
    //2.绑定事件
    closeBanner.onclick = function () {
        //3.书写事件驱动程序
//        console.log(1);
        //类控制
//        topBanner.className += " hide"; //保留原类名，添加新类名
        topBanner.className = "hide";//替换旧类名
//        topBanner.style.display = "none";
    }

四、节点的访问关系和操作

    //节点的访问关系是以属性形式存在

    //1.box1是box的父节点
   var box2 = document.getElementsByClassName("box2")[0];
   var box2 = document.getElementById("box2")
   console.log(box2.parentNode);

   //2.nextElementSibling下一个兄弟节点
   console.log(box2.nextElementSibling);

   //firstElementChild第一个子节点
   console.log(box2.parentNode.firstElementChild);

   //所有子节点
   console.log(box2.parentNode.childNodes);//NodeList[5]

   console.log(box2.parentNode.children);//HTMLCollection[2]

// //节点的操作
    //1.创建
    var aaa = document.createElement("li");
    var bbb = document.createElement("afadsfadsf");
    console.log(aaa);
    console.log(bbb);

    //添加
    var box1 = document.getElementsByClassName("box1")[0];
    box1.appendChild(aaa);
    box1.insertBefore(bbb,aaa);

    // //删除
    box1.removeChild(bbb);
    aaa.parentNode.removeChild(aaa);//自杀，自己删除自己

    // //克隆
    var ccc = box1.cloneNode();
    var ddd = box1.cloneNode(true);
    console.log(ccc);
    console.log(ddd);
    // console.log(box1);

五、节点属性

 window.onload = function () {

            var eleNode = document.getElementsByTagName("img")[0];

            //属性、赋值获取两种方式
            //1.元素节点.属性或者元素节点[属性]
            eleNode.src = "image/jd2.png";
            eleNode.aaa = "bbb";
            console.log(eleNode.aaa);
            console.log(eleNode.src);
            console.log(eleNode.tagName);
            console.log(eleNode["title"]);
            console.log(eleNode["className"]);
            console.log(eleNode["alt"]);

            //2.元素节点.方法();
            console.log(eleNode.getAttribute("id"));
            eleNode.setAttribute("id","你好");
            eleNode.setAttribute("ccc","ddd");

            eleNode.removeAttribute("id");
        }

六、显示、隐藏盒子

 //1.获取事件源和相关元素
        var btn = document.getElementById("btn");
        var div = document.getElementsByTagName("div")[0];
        //2.绑定事件
        btn.onclick = function () {
            //3.书写事件驱动程序
            //判断btn的innerHTML属性值，如果为隐藏就隐藏盒子，并修改按钮内容为显示。
            //反之，则显示，并修改按钮内容为隐藏
            if(this.innerHTML === "隐藏"){
                div.className = "hide";
                //修改文字（innerHTML）
                btn.innerHTML = "显示";
            }else{
                div.className = "show";
                //修改文字（innerHTML）
                btn.innerHTML = "隐藏";
            }
        }

照片画廊：

 //1.获取事件源和相关元素
    //利用元素获取其下面的标签。
    var ul = document.getElementById("imagegallery");
    var aArr = ul.getElementsByTagName("a");
//    console.log(aArr[0]);
    var img = document.getElementById("image");
    var des = document.getElementById("des");
    //2.绑定事件
    //以前是一个一个绑定，但是现在是一个数组。for循环绑定
    for(var i=0;i<aArr.length;i++){
        aArr[i].onclick = function () {
            //3.书写事件驱动程序
            //修改属性
            //this指的是函数调用者，和i并无关系，所以不会出错。
            img.src = this.href;
//            img.src = aArr[i].href;
            des.innerHTML = this.title;
            return false;//不能删除，否则会跳到新页面显示图片
        }
    }

七、value和innerHTML和inerText

<!--<input type="button" value="我是input中的button"/>-->
<!--<button>我是button</button>-->
<input id="inp1" type="text" value="我是inpput的value属性值"/>

<div id="box1">
    我是box1的内容
    <div id="box2">我是box2的内容</div>
</div>

<div id="box3">
    我是box1的内容
    <div id="box4">我是box2的内容</div>
</div>


<script>

    //value：标签的value属性。
    console.log(document.getElementById("inp1").value);

    //innerHTML：获取双闭合标签里面的内容。（识别标签）
    console.log(document.getElementById("box1").innerHTML);
    document.getElementById("box1").innerHTML = "<h1>我是innerHTML</h1>";

    //innerText：获取双闭合标签里面的内容。（不识别标签）（老版本的火狐用textContent）
    console.log(document.getElementById("box3").innerText);
    document.getElementById("box3").innerText = "<h1>我是innerText</h1>";


</script>

八、for循环为文本框赋值和取值

 //for循环赋值
        //老三步
        var inpArr = document.getElementsByTagName("input");
        var btnArr = document.getElementsByTagName("button");

        //赋值
        btnArr[0].onclick = function () {
            //循环为每一个input赋值
            for(var i=0;i<inpArr.length;i++){
                inpArr[i].value = i;
            }
        }


        //获取值
        btnArr[1].onclick = function () {
            //循环获取nput的值赋值为一个数组
            var newArr = [];
            for(var i=0;i<inpArr.length;i++){
                newArr.push(inpArr[i].value);
            }
            console.log(newArr.join(" "));
        }

九、全选、反选

  window.onload = function () {
            //需求1：点击上面的的input，下面全选或者反选。
            //思路：获取了上面的input按钮，只需要判断，checked属性是true还是false，如果是true，下面的全部变成true；false同理。
            //老三步
            var topInp = document.getElementById("theadInp");
            var tbody = document.getElementById("tbody");
            var botInpArr = tbody.getElementsByTagName("input");

            //绑定事件
            topInp.onclick = function () {
                //牛劲版
//                for(var i=0;i<botInpArr.length;i++){
//                    if(topInp.checked === true){
//                        botInpArr[i].checked = true;
//                    }else{
//                        botInpArr[i].checked = false;
//                    }
//                }
                //费劲版
//                    if(topInp.checked){
//                        for(var i=0;i<botInpArr.length;i++){
//                            botInpArr[i].checked = true;
//                        }
//                    }else{
//                        for(var i=0;i<botInpArr.length;i++){
//                            botInpArr[i].checked = false;
//                        }
//                    }
                //优化版（被点击的input按钮的checked属性值，应该直接作为下面的所有的input按钮的checked属性值）
                for(var i=0;i<botInpArr.length;i++){
                    botInpArr[i].checked = this.checked;
                }
            }

            //需求2：点击下面的的input，如果下面的全部选定了，上面的全选，否则相反。
            //思路：为下面的每一个input绑定事件，每点击一次都判断所有的按钮
            // checked属性值是否全部都是true，如果有一个是false，
            // 那么上面的input的checked属性也是false;都是true，topInp的checked就是true；

            //老三步
            for(var i=0;i<botInpArr.length;i++){
                botInpArr[i].onclick = function () {
                    //开闭原则
                    var bool = true;
                    //检测每一个input的checked属性值。
                    for(var j=0;j<botInpArr.length;j++){
                        if(botInpArr[j].checked === false){
                            bool = false;
                        }
                    }
                    topInp.checked = bool;
                }
            }
        }

十、点亮盒子

//需求：鼠标放到哪个button上，改button变成黄色背景（添加类）
        //步骤：
        //1.获取事件源
        //2.绑定事件
        //3.书写事件驱动程序

        //1.获取事件源
        var btnArr = document.getElementsByTagName("button");
        //2.绑定事件
        for(var i=0;i<btnArr.length;i++){
            btnArr[i].onmouseover = function () {
                //排他思想（干掉所有人，剩下我一个）
                //排他思想是和for循环连用
                for(var j=0;j<btnArr.length;j++){
                    btnArr[j].className = "";
                }
                this.className = "current";
            }
        }
        //3.书写事件驱动程序

十一、tab栏切换

window.onload = function () {
            //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类);
            //思路：1.点亮盒子。   2.利用索引值显示盒子。
            //步骤：
            //1.获取事件源和相关元素
            //2.绑定事件
            //3.书写事件驱动程序（排他思想）


            //1.获取事件源和相关元素
            var liArr = document.getElementsByTagName("li");
            var spanArr = document.getElementsByTagName("span");
            //2.绑定事件（循环绑定）
            for(var i=0;i<liArr.length;i++){
                //绑定索引值
                liArr[i].index = i;
                liArr[i].onmouseover = function () {
                    //3.书写事件驱动程序（排他思想）
                    //1.点亮盒子。   2.利用索引值显示盒子。(排他思想)
                    for(var j=0;j<liArr.length;j++){
                        liArr[j].className = "";
                        spanArr[j].className = "";
                    }
                    this.className = "current";
                    spanArr[this.index].className = "show";
                }
            }
        }