JS获取子节点、父节点、兄弟节点

        //创建元素节点
        var a=document.createElement("div");
        var b=document.createElement("div");
        var c=document.createElement("div");

        //创建文本节点
        var txt1=document.createTextNode("第一个div");
        var txt2=document.createTextNode("第二个div");
        var txt3=document.createTextNode("第三个div");

        //把创建的文本添加到页面上(在节点之后添加)
        a.appendChild(txt1);
        b.appendChild(txt2);
        c.appendChild(txt3);    
        a.style.border="royalblue 1px solid";
        a.style.height=500+"px";
        b.style.height=300+"px";
        b.style.border="red 1px solid";
        c.style.height=100+"px";            
        c.style.border="yellow 1px solid";
        document.body.appendChild(a);
        document.getElementsByTagName("div")[0].appendChild(b);
        document.getElementsByTagName("div")[1].appendChild(c);

        //在某节点之前添加[父元素.insertBefore(要移动的节点,某节点)]
        function Repl(){
            var ul=document.getElementsByTagName("ul")[0];
            var li3=document.getElementsByTagName("li")[2];
            var li4=document.getElementsByTagName("li")[3];
            ul.insertBefore(li4,li3);
        }

        //用新的节点替换某节点replaceChild(要添加的节点,某节点)
        .....

        //克隆某节点[父元素.cloneNode(boolean),参数表示全部克隆还是只是克隆标签]
        function copy(){
            var ul=document.getElementsByTagName("ul")[0];
            var li=document.getElementsByTagName("li")[0];
            var li1=li.cloneNode(true);
            var li2=document.getElementsByTagName("li")[1];
            ul.insertBefore(li1,li2);
        }
        //父亲删除儿子
        parent.removeChild(b);

        //自杀
        child.remove();

        //父亲找儿子【parent.children 所有的元素节点;parent.childNodes 包含所有文本节点】
            //nodeName 标签--标签名  属性--属性名   文本---text


            //nodeType 节点类型 : 元素=1,文本=2,属性=3

        //父亲找第一个儿子【parent.firstElementChild】    

        //父亲找最后一个节点 【parent.lastElementChild】   


        //儿子找父亲【child.parentElemt】

        //儿子找爷爷【child.parentElemt.parentElemt】

        //找弟弟【child.nextElementSibling】

猜你喜欢

转载自blog.csdn.net/Yayou_com/article/details/81295906