3.节点事件

1.节点事件

1-1 节点获取

 <!--1 元素节点
    3 文本节点
    2 属性节点 -->
    <!-- getAttributeNode() 获取节点属性
    firstChild获取第一个子节点 -->
    <p id="app">hello world</p>
    <script>
        var app=document.getElementById("app");
        var id=app.getAttributeNode("id");
        console.log(app.nodeType)//1
        console.log(app.firstChild.nodeType)//3
        console.log(id.nodeType)//2
    </script>

1-2获取元素节点

<ul id="app">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
    <script>
        var app=document.getElementById("app");
        var childs=app.childNodes;
        var arr=[];
        for(var i=0;i<childs.length;i++){
            if(childs[i].nodeType ==1){
                arr.push(childs[i])
            }
        }
        console.log(arr);//==1,li li li li
                                        //==3,text*5
    </script>

1-3 获取全部元素

    <ul id="app">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
    <script>
        var app=document.getElementById("app");
        var childs=app.childNodes;
        // var children=app.children;
        console.log(childs)//全部元素text li text li text li text li text
        // console.log(children)//元素节点 li li li li

1-4 增加节点元素

    <div id="app"></div>
    <script>
        var app=document.getElementById("app");
        var p=document.createElement("p");
        var txt =document.createTextNode("hello world");
        p.appendChild(txt);
        app.appendChild(p);
    </script>

1-5 修改节点元素

    <ul id="app">
        <li>html</li>
        <li id="js">javascript</li>
    </ul>
    <script>
        // 给元素添加内容innerHTML 
        /* 
        parentNode.insertBefore(newNode,targetNode)
         */
        var app=document.getElementById("app");
        var js=document.getElementById("js") ;
        var li=document.createElement("li");
        li.innerHTML="vue";
        app.insertBefore(li,js);
    </script>

1-6 移除节点元素

    <div id="app">
        <div id="child">child</div>
    </div>
    <script>
                 // removeChild()让从元素DOM树,渲染树上都消失
        var app=document.getElementById("app");
        var child =document.getElementById("child");
        app.removeChild(child);
    </script>

1-7 替换节点元素

<div id="app">
        <div id="child">child</div>
        <!-- <p id="p">hello world</p> -->
    </div>
    <!-- 替换某个元素
    replaceChild(newNode,targetNode) -->
    <script>
        var app=document.getElementById("app");
        var child =document.getElementById("child");
        var p=document.createElement("p");
        p.innerHTML="hello world";
        app.replaceChild(p,child);
    </script>

1-8 克隆节点

    <div id="app">
        <div class="one">
            hello world
        </div>
    </div>
    <script>
        var app=document.getElementById("app");
        var one=document.getElementsByClassName("one")[0];
        var test=one.cloneNode(true);
        console.log(test);
        app.appendChild(test);
    </script>