day26（代码的同步与异步 节点间的遍历 js文本 节点的属性 以及 综合案例：选项卡）

一.代码的执行顺序（同步与异步）
1.概念

同步代码与异步代码的问题？

1. 同步代码自上而下顺序执行
2. 异步代码在同步代码全部执行完后运行
3. 事件体就是异步代码

2.案例

动态表格：   
    var oTable = document.createElement("table");
    var count = 0;
    oTable.border = "1px";

    for(var i=0; i<3; i++){
        var oTr = document.createElement("tr");
        oTable.appendChild(oTr);
        for(var j=0; j<3; j++){
            var oTd = document.createElement("td");
            oTr.appendChild(oTd);
            oTd.innerHTML = ++count;
        }

        var oDelTd = document.createElement("td");
        oTr.appendChild(oDelTd);
        oDelTd.innerHTML = "删除";

        oDelTd.onclick = function(){-----------注意事项:事件体的代码,在页面渲染的时候不执行,只有用户通过动作触发时执行
           parentNode找父元素
             oDelTd.parentNode.remove();-----------------所以该方法无法实现点一行的删除就删掉那一行表格的效果
    代码异步的解决方案：
           this:函数体的内置对象,与事件体连用，代表触发该事件的元素
            this.parentNode.remove();
        }
    }
    document.body.appendChild(oTable);

二.节点之间的遍历

节点间的遍历:
    父找子:（4个）此处要注意区分children与childNodes的区别
        1.firstElementChild：返回节点的第一个子节点
        2.lastElementChild：返回节点的最后一个子节点
        3.childNodes：返回父节点的所有子节点,返回的文本节点和元素节点
        案例：
            var oUl = document.querySelector('ul');
            var oLis = oUl.childNodes;
            for(var i=0; i<oLis.length; i++){
                if(oLis[i].nodeType == 3){
                    oLis[i].remove();
                }
            }
            for(var i=0; i<oLis.length; i++){
                console.log(oLis[i].innerHTML);
            }

        4.children：返回父节点的所有子节点,返回元素节点（存放在数组中，可通过下标索引使用）
         var oUl = document.querySelector('ul');
            var oLis = oUl.children;
        
            for(var i=0; i<oLis.length; i++){
                console.log(oLis[i].innerHTML);
            }
    
 子找父：（1个）
       5.parentNode
    
 兄弟：（2个）
       6.nextElementSibling 下一个节点
       7.previousElementSibling 上一个节点

三.js文本（2种）

js中使用的文本分为两大类：

    1.表单元素的value
    2.innerHTML：innerHTML作用，常用于字符串拼接页面
    
	    演示：
		    <div>我是<span>刘浩然</span>的女朋友石卓冉</div>
		    var oDiv = document.querySelector("div");
		    
		    outerHTML:包含自身标签的所有内容
		    console.log(oDiv.outerHTML);
		
		    innerText:只打印文本内容，不包含标签
		    console.log(oDiv.innerText);
		
		    innerHTML:不包含自身标签的所有内容
		    console.log(oDiv.innerHTML);

四.节点的属性

1.普通属性（2读写方法+添加自定义属性）

1）点运算
    读
    var oBox = document.querySelector("#box");
    console.log(oBox.id);
    
    写
    oBox.id = "hahaha";
2）getAttribute/setAttribute方法
    var oBox = document.querySelector("#boxxxx");
    读:
    dom对象.getAttribute(属性名):属性值
    console.log(oBox.getAttribute("id")); 

    写:
    dom对象.setAttribute(属性名,属性值) 
    oBox.setAttribute("class","heiheihei");
3）添加自定义属性
    var oBox = document.querySelector("#boxxxx");
    oBox.aaaa = 99999;
    console.log(oBox.aaaa);

2.style属性（读与写）

var oBox = document.querySelector("#boxxxx");
    写:dom节点.style.属性名 = "属性值" 
    注意事项:属性值全都是字符串
        oBox.style.width = 200+"px"; -------------> "200px"
        oBox.style.height = 200+"px"; 
        oBox.style.backgroundColor = "hotpink";

    读: getComputedStyle(dom节点名,false)["属性名"]:返回属性值
        console.log(oBox.style.fontSize);----------------------------------结果为""，所以这个方法不能读取
        console.log(getComputedStyle(oBox,false)["fontSize"]);

3.offset相关属性（区分读与写的使用场景）

offset相关属性
    var oBox = document.querySelector("#boxxxx");
    
    不合适的数值读取方式：
        console.log(getComputedStyle(oBox,false)["width"]);----------带px的字符串,非数值，无法使用
        
    读:offset读出来的都是数字
        console.log(oBox.offsetWidth);
        console.log(oBox.offsetHeight);
        console.log(oBox.offsetLeft);
        console.log(oBox.offsetTop);

    写:和style的写一毛一样,单位是带px的字符串
        oBox.style.left = "300px"; 
        
        
        
小老虎跳一跳案例：区分offset属性的读与写
需求：鼠标每点一下，老虎图片向上平移一定的高度（展现跳起来效果），然后两秒钟后平移回到原来的位置
    style：
        #tiger{
            height: 100px;
            width: 100px;
            background-image: url(img/3.jpg);
            background-size: 100px 100px;
            position: absolute;
            left:200px;
            top:600px;
        }
    html：
        <div id="tiger"></div>
    script：
        var oTiger = document.querySelector("#tiger");

        document.onclick = function(){
        oTiger.style.top = oTiger.offsetTop - 100 + "px";---------------------------该语句第一个offset属性oTiger.style.top属于“写”的属性，也即给对象oTiger的top赋上新属性，所以写法与style大体一致，直接使用style加点运算符然后打点写top，但是后面的第二个offset属性oTiger.offsetTop与第一个有所不同，这个属性需要提供自身原本的属性值与后面的100进行加减运算，从而得到新值赋给前面的第一个offset属性，故此处的第二个offset属性写法应该是获取属性，也即“读”的写法，所以此处写法是：对象.offsettop。

        setTimeout(function(){
            oTiger.style.top = "600px";
        },2000);
    }

五.综合性案例：选项卡

style：
    *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #wrap{
            width: 500px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto;
        }

        ul{
            height: 100px;
            display: flex;
            justify-content: space-evenly;
            text-align: center;
            border: 1px solid red;
            line-height: 100px;
        }

        li{
            width: 24%;
            border: 1px solid red;
        }

        #box{
            height: 300px;
            border: 1px solid red;
        }

        .newStyle{
            color: yellow;
            background-color: hotpink;
        }

        .oldStyle{
            color: black;
            background-color: white;
        }

html：
    <div id="wrap">
        <ul>
            <li>男装</li>
            <li>女装</li>
            <li>童装</li>
            <li>程序员装</li>
        </ul>
        <div id="box"></div>
    </div>

script
    var oLis = document.getElementsByTagName("li");
    var oBox = document.querySelector("#box");
    异步解决方案1：let代替var
    let修饰的循环变量,可以避免i变量丢失
    for(let i=0; i<oLis.length; i++){
        oLis[i].onclick = function(){
            for(let j=0; j<oLis.length; j++){
                if(i == j){
                    /* oLis[j].style.color = "yellow";*/------------样式写法1
                    // oLis[j].style.backgroundColor = "hotpink";
                    //样式直接赋值 : className
                    oLis[j].className = "newStyle";------------样式写法2
                }else{
                    // oLis[j].style.color = "";
                    // oLis[j].style.backgroundColor = "";
                    oLis[j].className = "oldStyle";
                }
            }

            switch(i){
                case 0:
                    oBox.style.backgroundColor = "red";
                    break;
                case 1:
                    oBox.style.backgroundColor = "yellow";
                    break;
                case 2:
                    oBox.style.backgroundColor = "blue";
                    break;
                case 3:
                    oBox.style.backgroundColor = "green";
                    break;
            }
        }
    }
    异步解决方案2：给li组成的数组oLis的每一个循环元素oLis[i]增加新属性index，并将i赋值给它，然后再函数体中，用this.index读取当前节点属性，代替已经循环完毕的变量i，通过这种方法保证函数体中i的数值与每一轮对应的元素li对应。（由于i随着每一轮循环的自增，被赋值为每一轮循环的li的index属性值，所以每一行也即每一轮li的index属性值必然不同，可通过oLis数组下标索引不同的li然后读取index属性值来验证。）
     for(var i=0; i<oLis.length; i++){
        oLis[i].index = i;
        oLis[i].onclick = function(){
            for(var j=0; j<oLis.length; j++){
                if(this.index == j){
                    // oLis[j].style.color = "yellow";
                    // oLis[j].style.backgroundColor = "hotpink";
                    //样式直接赋值 : className
                    oLis[j].className = "newStyle";
                }else{
                    // oLis[j].style.color = "";
                    // oLis[j].style.backgroundColor = "";
                    oLis[j].className = "oldStyle";
                }
            }

            switch(this.index){
                case 0:
                    oBox.style.backgroundColor = "red";
                    break;
                case 1:
                    oBox.style.backgroundColor = "yellow";
                    break;
                case 2:
                    oBox.style.backgroundColor = "blue";
                    break;
                case 3:
                    oBox.style.backgroundColor = "green";
                    break;
            }
        }
    }