JS DOM manipulation, DOM addition, DOM deletion, DOM replacement, element lookup, node cloning, backflow and redraw, document fragment

This is the seventh day of my participation in the First Challenge 2022. For details: First Challenge 2022.

DOM is newly added

innerHTML
Create a text nodecreateTextNode()

CreateElement () insert: insertBefore(element to be inserted, element specified) before the specified element

InnerHTML parses only the string chestnut when creating the tag: innerHTML parses only the string chestnut when creating the tag: innerHTML parses only the string chestnut when creating the tag

	<div class="a">
        <span>111</span>
    </div>
Copy the code

InnerHTML feature:

 		var oDiv = document.querySelector('.a') ;
        oDiv.innerHTML = '<p>666</p>'
Copy the code

Create a label createElement

		var oP = document.createElement('p') ;
        console.log(oP);
Copy the code

If written like this:

oDiv.innerHTML = oP ; // Can't parse?Copy the code

You can’t parse because innerHTML can only parse strings

Create a text node

		var oText = document.createTextNode('666');
        console.log(oText);
Copy the code

Add child elements to insert text into the tag

oP.appendChild(oText) ;
Copy the code

Insert p into div

oDiv.appendChild(oP)
Copy the code

* Note: You can only operate on a tag once – tags are objects and objects have unique addresses

Insert the P tag before the SPAN tag

		var oSpan = document.querySelector('span') ;
        oDiv.insertBefore(oP , oSpan)
Copy the code

DOM deletion

remove( )Deletes itself and all child elements
removeChild( )Deletes the specified child element. Only the child can be deleted, not the grandchild
innerHTML = ' 'Remove all child elements

<body>
    <div class="a">
        <p>11</p>
        <span>22</span>
        <h2>
            <i>888</i>
        </h2>
    </div>
    <script>      
        var oDiv = document.querySelector('.a');// odiv.remove () // removes itself and all its children

        var oP = document.querySelector('p'); oDiv.removeChild(oP)// Deletes the specified child element

        // odiv.innerhtml = "// Remove all child elements
        var oI = document.querySelector('i'); oDiv.removeChild(oI)// Error -- removeChild() can only delete a child, but cannot delete a grandson
    </script>    
</body>
Copy the code

DOM replacement

ReplaceChild element replaceChild(new, old)

<body>
    <div class="a">
        <p>11</p>
        <span>22</span>
        <h2></h2>
    </div>
    <script>
        var oDiv = document.querySelector('.a');var oSpan = document.querySelector('span');var oStrong = document.createElement('strong'); oStrong.innerHTML ='888'

        oDiv.replaceChild(oStrong , oSpan) // replace oSpan with oStrong
    </script>    
</body>
Copy the code

Find elements

Find the parent element`parentNode`

<body>

    <ul>
        <li>
            <p>11</p>
            <button>111</button>
        </li>
        <li>
            <p>22</p>
            <button>222</button>
        </li>
        <li>
            <p>33</p>
            <button>333</button>
        </li>
    </ul>

    <script>

        // Find the parentNode element

        var oBtns = document.querySelectorAll('button');for(var i = 0 ; i < oBtns.length ; i++) {
            oBtns[i].onclick = function () {  
                console.log(this.parentNode); // Find the parent element of the current click object, the current click object is Button, the parent element is Li}}</script>
    
</body>
Copy the code

2. Find child elements

childNodes: child node – contains all text, line feeds, labels, comments, and so on

<body>
    <div class="a">
        <! -- Here is a comment -->
        <p>11</p>
        <span>222</span>
        <h3>333</h3>
    </div>
    <script>
        var oDiv = document.querySelector('.a');console.log(oDiv.childNodes);
        console.log(oDiv.firstChild);   / / the node
    </script>  
</body>
Copy the code

Print result:You can see that all the nodes are printed, and firstChild prints the first node, text

childrenChild elements – contain only tags

<body>

    <div class="a">
        <! -- Here is a comment -->
        <p>11</p>
        <span>222</span>
        <h3>333</h3>
    </div>


    <script>
	    // firstElementChild First child

        // lastElementChild The last child

        var oDiv = document.querySelector('.a');console.log(oDiv.childNodes);

        console.log(oDiv.children); // Prints all elements
        console.log(oDiv.firstElementChild); // The first child
        console.log(oDiv.lastElementChild);   / / label
        console.log(oDiv.children[0]); // Find the child element by ordinal

    </script>
    
</body>
Copy the code

Print result:You can see that only the tag elements are retrieved

3. Find sibling elements

previousElementSiblingPrevious tag sibling element
nextElementSiblingThe last tag brother
previousSiblingPrevious sibling node
nextSiblingThe latter sibling node

Chestnut:

<body>
    <div class="a">
        <h1>00</h1>
        <span>11</span>
        <p>22</p>
        <strong>333</strong>
    </div>
    <script>
        var oDiv = document.querySelector('.a');var oP = document.querySelector('p');console.log(oP.previousElementSibling);  // The previous tag sibling element span

        console.log(oP.previousSibling);  // Previous sibling, newline, text

        console.log(oP.nextElementSibling); // The latter tag sibling, strong

        console.log(oP.nextSibling);  // Next sibling, newline,text


        console.log(oP.previousElementSibling.previousElementSibling);

    </script>
    
</body>
Copy the code

Print result:

5. Clone nodes

cloneNode()To clone a node, only labels are copied by default
cloneNode(true)Clone node, containing child elements

<body>
    <div class="a">
        <p>222</p>
    </div>
    <script>
        var oDiv = document.querySelector('.a');var oDiv2 = oDiv.cloneNode(true);// Clone node, containing child elements
        console.log(oDiv2);
        
        var oDiv3 = oDiv.cloneNode() ;// Clone the node. By default, only labels are copied
        console.log(oDiv3);
        
        document.body.appendChild(oDiv2)
        document.body.appendChild(oDiv3)
    </script>  
</body>
Copy the code

Print result:

Reflow and redraw

1. Basic concepts

backflow

The process of reconstructing the render tree when part or all of it changes due to size margins, element size, layout, hiding, etc., is called resizing.

redraw

Each page needs to be refluxed at least once, the first time the page loads. On backflow, the browser invalidates the affected portion of the render tree and reconstructs that portion of the render tree. When backflow is complete, the browser redraws the affected portion of the render tree onto the screen, a process called redraw.

* Note: Backflow always causes redraw, but redraw does not necessarily cause backflow. Backflow costs more than repainting, and repainting and backflow are unavoidable. This problem can only be optimized, not solved. Any DOM operation causes backflow

1. Conditions for reflux

Backflow is required when the page layout and geometry properties change. Browser backflow occurs when (1) visible elements are added or removed;

(2) Element position changes;

(3) Element size changes — margins, padding, borders, width, and height

(4) Content changes (text number or picture size, etc.)

(5) Page first render When the page is first rendered, all components are laid out for the first time, which is the most expensive backflow.

(6) The browser window size changes — when the resize event occurs

(7) Activate CSS pseudo-classes (such as: :hover)

(8) Set the style attribute

2, redraw the occurrence conditions

When some elements in the Render Tree need to update their attributes, these attributes will only affect the appearance and style of the elements, but will not affect the layout, such as: visibility, outline, background color, etc.

7, Document fragment

The DOM defines a document fragment as a “lightweight” document that can contain and control nodes, but does not consume additional resources like a full document. It can contain various types of nodes and is empty when it is created. One useful feature is that when a DocumentFragment node is requested to be inserted into the document tree, instead of the DocumentFragment itself, all of its descendants are inserted.

You can use a document fragment as a “repository,” where you can hold nodes that might be added to the document in the future. It also facilitates cutting, copying, and pasting of documents.