DOW 文档对象

 console.log(document);//文档节点。
    // console.dir(document);//文档节点。
    //通过id获取元素节点。
    // console.log(document.getElementById("box").title);//只有document能够调用
    //通过标签名获取元素节点.返回值为数组
//    console.log(document.getElementsByTagName("div"));//document和元素节点都能够调用
    //通过class属性获取的元素节点.返回值为数组.IE5678不支持。
    // console.log(document.getElementsByClassName("box"));//document和元素节点都能够调用
整个文档是一个文档节点
        每个 HTML 元素是元素节点
        HTML 元素内的文本是文本节点
        每个 HTML 属性是属性节点
        注释是注释节点

1.API 文档接口

结点

1.nodeType 节点类型

               1) 元素节点  <==>   1  
                2) 属性节点  <==>   2
                3) 文本节点  <==>   3
         共十二个节点类型（一到十二表示）
              子节点 集合
                box.childNodes
                box.children
                第一个子节点 ， 最后一个子节点
                firstChild     lastChild

看浏览器是否兼容

 //父节点
    // var box2 = document.getElementById("box2");
    // console.log(box2.parentNode);
    //兄弟节点
    //box2.nextElementSibling  || box2.nextSibling;  //下一个兄弟
    //box2.previousElementSibling || box2.previousSibling //前一个兄弟
    //子节点
    //box2.firstElementchild  || box2.firstChild;  //第一个
    //box2.lastElementchild || box2.flastChild      //最后一个
    //所有子节点
    // childNodes // children;

结点方法

创建节点
          var liNew = document.createElement("li")
          liNew.innerHTML = "<a href='###'>haohao</a>"

    // 添加节点  
    // 父节点 .appendChild(子节点)
    // 在尾部添加
   获取结点
   getAttribute
     属性结点
     Attribute

    // document.body.appendChild(li);

    // insertBefore() 方法可在已有的子节点前插入一个新的子节点。(新节点，老节点)
    // ul.insertBefore(liNew,liOld)

    // 删除节点   父节点 .removeChild(子节点)
             // ul.removeChild(ul.firstElementChild);
    // 克隆节点
        // var a = li.cloneNode()
        // ul.appendChild(a)

结点属性方法

 var div = document.getElementById("d")
    /*获取属性*/   
    // console.log(div.getAttribute("class"))

    /*设置属性*/
    // div.setAttribute("style","background:red")
    // div.setAttribute("id","dd")
    // div.setAttribute("class","dd")
    // div.setAttribute("onclick","dd")

    /*删除属性*/
    // div.removeAttribute("id")
    // div.removeAttribute("class")

事件绑定

addEventListener（事件，函数）

表格

 var arr = ["姓名","年龄","操作"]
    var arr1 = []
    var tab = document.createElement("table")
    tab.border = "1px"
    // tab.setAttribute()
    document.body.appendChild(tab)

    for(var i = 0;i<1;i++){
         var tr = document.createElement("tr")
         tr.height = "30px"
         for(var j =0;j<arr.length;j++){
            var th = document.createElement("th")
            th.innerHTML = arr[j]
            tr.appendChild(th)
       }
          tab.appendChild(tr)
    }


    // 创建行
    for(var i = 0;i<arr1.length;i++){

       var tr = document.createElement("tr")
        tr.setAttribute("onmouseover","fun2(this)")
       tr.height = "30px"
        if(i%2===0){
            tr.setAttribute("style","background:yellow")
        }
           for(var j =0;j<2;j++){
            var td = document.createElement("td")
            td.setAttribute("onclick","fun(this)")
           
            // td.setAttribute("contenteditable","true")
            td.innerHTML = arr1[i][j] 
            tr.appendChild(td)
           }
       // 创建按钮
        var btn = document.createElement("button")
        btn.innerHTML = "删除";
        // btn.setAttribute("onclick","del(this)")
        tr.appendChild(btn);
        tab.appendChild(tr)

    }

    function del(a){
        console.log(a.parentNode.parentNode)
         tab.removeChild(a.parentNode);
    }
     var input = document.createElement("input");

     function fun(a){
        input.value=a.innerText;        
        a.innerHTML = "";
        a.appendChild(input);
        input.focus();
        input.setAttribute("onblur","fun1(this)")
        console.log(a)
    }


    function fun1(a){
       a.parentNode.innerHTML = a.value
    }
    function fun2(a){
       a.style.background = bgColor()
    }

    function bgColor(){

        var str = "#";
        for(var i =0;i<6;i++){
            str+=Math.round(Math.random()*15).toString(16);
        }
        return str
    }

insertAfter

 // Dom 里没有这个insertAfter  没有这个方法
    function insertAfter(NewNode,TargetNode){

        var par = TargetNode.parentNode;
        // 如果最后的节点是目标就直接添加
        if(par.lastElementChild == TargetNode){
            par.appendChild(NewNode)
        }else{
            // 如果不是 就插入在 目标元素在下一个节点在前面(TargetNode)
            par.insertBefore(NewNode,TargetNode.nextElementSibling)
        }