JS DOM uses different methods to get nodes and insert, copy and remove nodes

How to operate nodes

appendChild()

insertBefore()

replaceChild()

cloneNode()

normalize()

splitText()

 

 

sppendChild() appends child elements

. firstElementChild() first child element node

The return value is the child node of the operation

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

            var ul=document.getElementById("myul");
            var txt=document.createTextNode("4");
            var li=document.createElement("li");
            li.appendChild(txt);
            var myli=ul.appendChild(li);
            console.log(myli);//The return value is the child node of the operation

            // The first child element obtained is moved to the end
            var firstLi=ul.firstElementChild;
            ul.appendChild(firstLi);


        });

    </script>
</head>
<body>
    <ul id="myul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

. children.item(n) get the n+1 child element node

. children[n] get the n+1 child element node

The parent element. InsertBefore (the inserted element, the location to be inserted) inserts the element before the specified location

The return value is the newly inserted node

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

            var ul=document.getElementById("myul");
            var txt=document.createTextNode("4");
            var li=document.createElement("li");
            li.appendChild(txt);

            var pos=ul.children[2];
            ul.insertBefore(li,pos);
            var myli=ul.insertBefore(li,pos);
            console.log(myli);//The return value is the child node of the operation


        });

    </script>
</head>
<body>
    <ul id="myul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

When the second parameter is set to null, it can achieve the same effect as appendChild

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

            var ul=document.getElementById("myul");
            var txt=document.createTextNode("4");
            var li=document.createElement("li");
            li.appendChild(txt);

            ul.insertBefore(li,null);


        });

    </script>
</head>
<body>
    <ul id="myul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

Replacechild (node to be inserted, node to be replaced)

The return value is the replaced node

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

            var ul=document.getElementById("myul");
            var txt=document.createTextNode("4");
            var li=document.createElement("li");
            li.appendChild(txt);

            //ul.replaceChild(li,ul.lastElementChild);
            var oldLi=ul.lastElementChild;
            var returnNode=ul.replaceChild(li,oldLi);
            console.log(returnNode);


        });

    </script>
</head>
<body>
    <ul id="myul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

 

But I found that when I tried to select the returned node in the console, the page crashed

 

. cloneNode() shallow copy

. cloneNode(true) deep copy, will copy the child elements as well

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

            var ul=document.getElementById("myul");
            var newNode=ul.cloneNode();
            console.log(newNode);

            var newNode2=ul.cloneNode(true);
            console.log(newNode2);

            document.body.appendChild(newNode2);

        });

    </script>
</head>
<body>
    <ul id="myul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

 

 normalize()

The normalize() method removes empty text nodes and connects adjacent text nodes

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

            var div=document.createElement("div");
            var txt1=document.createTextNode("hello~");
            var txt2=document.createTextNode("cyy~");
            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>

        });

    </script>
</head>
<body>
    
</body>
</html>

splitText(n) divides a text node into two, starting at position n

And return the new text node

The splitText() method divides the Text node into two nodes at the specified offset. The original Text node will be modified to contain the Text content (but not the Text content) before the location specified by offset. The new Text node will be created to hold all characters from the offset position (including characters in that position) to the end of the original character. The new Text node is the return value of the method.

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

            var div=document.createElement("div");
            var txt=document.createTextNode("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~"

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

        });

    </script>
</head>
<body>
    
</body>
</html>

removeChild()

Return deleted child nodes

Parameter must be passed in

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

            var ul=document.getElementById("ul");
            ul.removeChild(ul.children[1]);
        });

    </script>
</head>
<body>
    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

 

removeNode()

Is the private implementation of IE

Delete the target node. The default parameter is false, only the target node is deleted

When the parameter is true, the child nodes of the target node will also be deleted

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

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

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

    </script>
</head>
<body>
    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

The difference between removeChild() and innerHTML

Comparison of the first group

Conclusion: when removeChild() is used to delete child nodes, there will be residues under IE8, which will occupy memory over time

Delete child nodes with innerHTML, no residue

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

            var div=document.createElement("div");
            console.log(div.parentNode);//null Not loaded to dom on the tree

            // document.body.removeChild(document.body.appendChild(div));
            // console.log(div.parentNode);//There are document fragments below IE8, other browsers are null

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

    </script>
</head>
<body>

</body>
</html>

Comparison of the second group

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

            var ul1=document.getElementById("ul1");
            ul1.parentNode.removeChild(ul1);
            console.log(ul1.id + ul1.innerHTML);
            
            var ul2=document.getElementById("ul2");
            ul2.parentNode.innerHTML="";
            console.log(ul2.id + ul2.innerHTML);

        });

    </script>
</head>
<body>
    <ul id="ul1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul id="ul2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

Normal browser results:

 

IE8 the following browser results:

 

At this time, the elements deleted with innerHTML can no longer obtain the complete data

Conclusion:

Under IE8, removeChild is equivalent to breaking branches, and innerHTML emptying is equivalent to uprooting

In other browsers, removeChild and innerHTML are equivalent to breaking branches, which can be used again

 

deleteContents()

textContent

Tags: Javascript IE

Posted on Fri, 07 Feb 2020 05:01:43 -0500 by digi24