JS DOM用不同方法获取节点及对节点插入、复制和移除

@H_403_0@操作节点的方法

@H_403_0@appendChild()

@H_403_0@insertBefore()

@H_403_0@replaceChild()

@H_403_0@cloneNode()

@H_403_0@normalize()

@H_403_0@splitText()

@H_403_0@

@H_403_0@sppendChild() 追加子元素

@H_403_0@.firstElementChild() 第一个子元素节点

@H_403_0@返回值是被操作的那个子节点

<!DOCTYPE html>
<html lang="en"head>
    Meta charset="UTF-8"title>Document</style>
        body{
            width:100%;
            height;
        }
    script src="DomReady.js"></script
        myReady(function(){

            var ul=document.getElementById("myul);
             txtdocument.createTextNode(4 lidocument.createElement(li);
            li.appendChild(txt);
             myliul.appendChild(li);
            console.log(myli);//返回值是被操作的那个子节点

             获取到的第一个子元素被移动到了最后
             firstLiul.firstElementChild;
            ul.appendChild(firstLi);


        });

    bodyul id="myul">
        li>1>2>3ulhtml>

@H_403_0@.children.item(n) 获取第n+1个子元素节点

@H_403_0@.children[n] 获取第n+1个子元素节点

@H_403_0@父元素.insertBefore(被插入的元素，要插入的位置）会在指定位置之前插入元素

@H_403_0@返回值就是新插入的节点

);
            li.appendChild(txt);

             posul.children[2];
            ul.insertBefore(li,pos);
            ul.insertBefore(li,pos);
            console.log(myli);返回值是被操作的那个子节点


        });

    >

@H_403_0@当第二个参数设置为null时，能够实现与appendChild相同的效果

);
            li.appendChild(txt);

            ul.insertBefore(li,null);


        });

    >

@H_403_0@replaceChild(要插入的节点，被替换掉的节点）

@H_403_0@返回值是被替换的节点

ul.replaceChild(li,ul.lastElementChild);
             oldLiul.lastElementChild;
             returnNode>

@H_403_0@

@H_403_0@ 不过我发现在控制台尝试想要选中被返回的节点，页面就崩溃了

@H_403_0@

@H_403_0@ .cloneNode() 浅拷贝

@H_403_0@.cloneNode(true) 深拷贝，会把子元素也拷贝

 newNodeul.cloneNode();
            console.log(newNode);

             newNode2ul.cloneNode(true);
            console.log(newNode2);

            document.body.appendChild(newNode2);

        });

    >

@H_403_0@

@H_403_0@ normalize()

@H_403_0@normalize() 方法移除空的文本节点，并连接相邻的文本节点

 divdiv txt1hello~ txt2cyy~);
            div.appendChild(txt1);
            div.appendChild(txt2);
            document.body.appendChild(div);
            console.log(div.childNodes.length);2   <div>"hello~" "cyy~"</div>
            div.normalize();
            console.log(div.childNodes.length);1  <div>hello~cyy~</div>

        });

    >
    
>

@H_403_0@splitText(n) 把一个文本节点分割为两个，从位置n开始

@H_403_0@并且返回新的文本节点

@H_403_0@splitText()方法将在指定的 offset 处把 Text 节点分割成两个节点。原始的 Text 节点将被修改，使它包含 offset 指定的位置之前的文本内容（但不包括文本内容）。新的 Text 节点将被创建，用于存放从 offset 位置（包括该位置上的字符）到原字符结尾的所有字符。新的 Text 节点是该方法的返回值。

hello~cyy~);
            div.appendChild(txt);
            document.body.appendChild(div);
            console.log(div.childNodes.length);1  "hello~cyy~"
            
            div.childNodes[0].splitText(5);
            console.log(div.childNodes.length);//2   "hello" "~cyy~"

            div.childNodes[0].splitText(5);
            console.log(newNode);"~cyy~"
>

@H_403_0@removeChild()

@H_403_0@返回被删除的子节点

@H_403_0@必须传入参数

ul);
            ul.removeChild(ul.children[1]);
        });

    ="ul">

@H_403_0@

@H_403_0@removeNode()

@H_403_0@是IE的私有实现

@H_403_0@删除目标节点。默认参数是false，仅删除目标节点

@H_403_0@当参数为true，则会把目标节点的子节点也删除

 var ul=document.getElementById("ul");
             var removedNode=ul.removeNode();
             console.log(removedNode.outerHTML);//<ul id="ul"></ul>

             removedNodeul.removeNode();
            console.log(removedNode.outerHTML);
             <ul id="ul">
                 <li>1</li>
                 <li>2</li>
                 <li>3</li>
             </ul>
        });

    >

@H_403_0@removeChild() 和innerHTML的区别

@H_403_0@第一组对比

@H_403_0@结论：使用removeChild()删除子节点，在IE8以下会有残留，久而久之占用内存

@H_403_0@使用innerHTML删除子节点，没有残留

);
            console.log(div.parentNode);null 还没有装载到dom树上

             document.body.removeChild(document.body.appendChild(div));
             console.log(div.parentNode);//IE8以下存在文档碎片，其他浏览器为null

            document.body.innerHTML"";
            console.log(div.parentNode);null
        
        });

    >

>

@H_403_0@第二组对比

 ul1ul1);
            ul1.parentNode.removeChild(ul1);
            console.log(ul1.id + ul1.innerHTML);
            
             ul2ul2);
            ul2.parentNode.innerHTML;
            console.log(ul2.id  ul2.innerHTML);

        });

    ="ul1"="ul2">

@H_403_0@普通浏览器结果：

@H_403_0@

@H_403_0@ IE8以下浏览器结果：

@H_403_0@

@H_403_0@ 此时使用innerHTML删除的元素，无法再获取到完整的数据

@H_403_0@结论：

@H_403_0@在IE8以下，removeChild相当于掰断树枝，innerHTML清空相当于连根拔起

@H_403_0@在其他浏览器中，removeChild和innerHTML都相当于掰断树枝，可以再次使用

@H_403_0@

@H_403_0@deleteContents()

@H_403_0@textContent

@H_403_0@

JS DOM用不同方法获取节点及对节点插入、复制和移除

猜你在找的JavaScript相关文章