The Little Red Book chapter 15: DOM Extension

<p>This is a <strong>paragraph</strong> with a list following it.</p> 
<ul> 
 <li>Item 1</li> 
 <li>Item 2</li> 
 <li>Item 3</li> 
</ul>
Copy the code

The actual text returned varies from browser to browser. IE and Opera convert all element labels to uppercase, while Safari, Chrome, and Firefox return the document’s source format, including Spaces and indentation. So don’t expect the innerHTML from different browsers to return exactly the same value.

In write mode, the value assigned to the innerHTML attribute is parsed into a DOM subtree, replacing all nodes before the element. Because the assigned value defaults to HTML, all tags in it are converted to elements in the same way that the browser handles HTML. If the assignment does not contain any HTML tags, a text node is generated directly, as shown below:

div.innerHTML = "Hello world!";
Copy the code

Because the browser parses the value, setting innerHTML to a string that contains the HTML makes a big difference. Consider the following example:

div.innerHTML = "Hello & welcome, \"reader\"! ";
Copy the code

The result of this operation is equivalent to:

<div id="content">Hello &amp; welcome, <b>&quot;reader&quot;!</b></div>
Copy the code

Note that setting innerHTML causes the browser to parse the HTML string into the corresponding DOM tree. This means that setting the innerHTML property immediately after reading it will give you a different string. This is because the string returned is the result of serializing the DOM subtree corresponding to the original string.

InnerHTML in old IE

In all modern browsers, it’s inserted with innerHTML

In IE8 and previous versions, you only need to insert like this

/ / it won't work
div.innerHTML = ";
Copy the code

// All of the following works
div.innerHTML = "_; 
div.innerHTML = "
         

            
         ; 
div.innerHTML = ";
Copy the code

To understand, IE play with yourself!

OuterHTML properties

This is basically the same as innerHTML, except that the original container element is replaced;

With insertAdjacentText insertAdjacentHTML () ()

The last two new methods for inserting tags are insertAdjacentHTML() and insertAdjacentText(). These two methods originated in Internet Explorer

They both accept two parameters: the location of the tag to be inserted and the HTML or text to be inserted.

•  “beforebegin”, inserts before the current element as the previous sibling node;
•  “afterbegin”, inserted inside the current element as a new child or placed before the first child;
•  “beforeend”, inserts inside the current element as a new child or after the last child;
•  “afterend”, inserted after the current element as the next sibling node.

The second parameter is parsed either as an HTML string (the same as innerHTML and outerHTML) or as plain text (the same as innerText and outerText). If it is HTML, an error is thrown if parsing fails.

The basic usage is shown below

// insert as the previous sibling node
element.insertAdjacentHTML("beforebegin"."
Hello world! 
"); 
element.insertAdjacentText("beforebegin"."Hello world!"); 
// inserted as the first child
element.insertAdjacentHTML("afterbegin"."
Hello world! 
"); 
element.insertAdjacentText("afterbegin"."Hello world!"); 
// insert as the last child node
element.insertAdjacentHTML("beforeend"."
Hello world! 
"); 
element.insertAdjacentText("beforeend"."Hello world!"); 
// insert as the next sibling node
element.insertAdjacentHTML("afterend"."
Hello world! 
"); element. 
insertAdjacentText("afterend"."Hello world!");
Copy the code

Memory and performance issues

Replacing child nodes with the method described in this section can cause memory problems in browsers, especially Internet Explorer. For example, if the subtree element is removed from which there were previously associated event handlers or other JavaScript objects (as attributes of the element), the binding relationship between them will remain in memory. If this substitution occurs frequently, the memory footprint of the page will continue to climb. Before using innerHTML, outerHTML, and insertAdjacentHTML(), it’s a good idea to manually remove the event handlers and JavaScript objects associated with the element to be replaced.

There are certainly advantages to using these attributes, especially innerHTML. In general, it’s much easier to insert a lot of new HTML using innerHTML than using multiple DOM operations to create nodes and then insert them. This is because the HTML parser parses the value set to innerHTML (or outerHTML). Parsers are low-level code (usually C++ code) in the browser and are much faster than JavaScript.

However, building and deconstructing HTML parsers is not without costs, so it’s best to limit the number of times you can use innerHTML and outerHTML.

For example, the following code uses innerHTML to create list items:

for (let value of values){ 
 ul.innerHTML += '<li>${value}</li>'; // Don't do that!
}
Copy the code

This code is inefficient because the innerHTML is set once per iteration. Not only that, but each loop also reads the innerHTML first, meaning that the loop accesses the innerHTML twice. To do this, it’s best to loop through building a single string and then assign the resulting string to innerHTML once, as in:

let itemsHtml = "";
for (let value of values){ 
	itemsHtml += '<li>${value}</li>'; 
} 
ul.innerHTML = itemsHtml;
Copy the code

This is much more efficient because there is only one assignment to innerHTML. when

Cross-site scripting

Even though innerHTML doesn’t execute its own creation

You are not advised to use innerHTML if you are using user-supplied information in a page. Preventing XSS attacks is more of a headache than the convenience you get with innerHTML. It is best to escape them.

scrollIntoView()

One problem not covered in the DOM specification is how to scroll an area of the page. To fill in the gaps, different browsers implement different ways to control scrolling. Of all these proprietary methods, HTML5 chooses to standardize scrollIntoView().

The scrollIntoView() method exists on all HTML elements and can scroll the browser window or container element to include the element into the viewport. This method takes the following parameters:

AlignToTop is a Boolean value.

• True: Align the top of the element with the top of the viewport after the window scrolls.
• False: Align the bottom of the element with the bottom of the viewport after the window scrolls.

ScrollIntoViewOptions is an option object.

• Behavior: Defines transition animations with desirable values “smooth” and “auto”, default “auto”.
• Block: Defines vertical alignment. Desirable values are “start”, “center”, “end”, and “nearest”. Default is “start”.
• Inline: Defines horizontal alignment with desirable values of “start”, “center”, “end” and “nearest”, default “nearest”.

Not passing an argument is equivalent to alignToTop being true.

Often use the menu bar scrolling operation, chat messages back to the bottom and other scenarios;

Here’s an example:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    ul {
        height: 200px;
        overflow-y: scroll;
        position: relative;
        border:1px solid pink;
    }

    li {
        height: 30px;
        line-height: 30px;
    }
</style>


<body>
    <ul>
        <li>111</li>
        <li>112</li>
        <li>113</li>
        <li>114</li>
        <li>151</li>
        <li>114541</li>
        <li>11451</li>
        <li>141411</li>
        <li>11453411</li>
        <li>112811</li>
        <li>1124231</li>
        <li>11446491</li>
        <li>1233</li>
        <li>111231231</li>
        <li>11145645</li>
    </ul>
</body>

<script>
    (function () {
        var li = document.querySelectorAll("li");
        var ul = document.querySelector("ul");
        var height = parseInt(getComputedStyle(document.querySelector("ul")).height);
        li.forEach(item= > {
            item.onclick = function () {
                this.style = "color:red"
                But if dad and Grandpa both have scroll bars, they will move
                this.scrollIntoView({behavior: 'smooth'.block: 'center'});

                /* 1. ScrollTop < 0 is fixed; 2. Li's offsetTop is based on dom and will not change. So if scollTop is equal to offsetTop, then the offsetTop will be at the top

                // let top = this.offsetTop;
                // console.log('top', top);
                // ul.scrollTop = top - height / 2;}})}) ()</script>

</html>
Copy the code

Proprietary extensions

childrenattribute

Why it’s here: Differences in the way that previous versions of IE9 handled blank text nodes compared to other browsers resulted in the children property.

The Children property is an HTMLCollection that contains only the Element’s Element type children. If the element’s child node types are all element types, children and childNodes should contain the same nodes.

The contains () method

DOM programming often involves determining whether an element is a descendant of another element. Internet Explorer first introduced the Contains () method, which lets developers retrieve this information without traversing the DOM. The contains() method should be called on the ancestor element to search for, taking the target node to be determined.

Contains () returns true if the target node is a descendant of the node being searched, false otherwise.

Here’s an example:

console.log(document.documentElement.contains(document.body)); // true
Copy the code

In addition, relationships between nodes can be determined using the compareDocumentPosition() method of DOM Level 3. This method returns a bitmask representing the relationship between the two nodes.

To mimic the contains() method, you use a mask of 16 (0x10). The result of the compareDocumentPosition() method can be used to determine whether the reference node contains the passed node by bitting and,

let result = document.documentElement.compareDocumentPosition(document.body); 
console.log(!! (result &0x10));
Copy the code

The value of result after the above code executes is 20 (or 0x14, where 0x4 means “followed”, plus 0x10 is “included”). Applying bitwise to result and 0x10 returns a non-zero value, and the two exclamation points convert this value to the corresponding Boolean value.

Internet Explorer 9 and later, as well as all modern browsers, support the contains() and compareDocumentPosition() methods.

Insert tags

HTML5 includes innerHTML and outerHTML, created by Internet Explorer, but there are two other attributes that don’t make the cut. The two remaining properties are innerText and outerText.

The innerText attribute

The innerText attribute corresponds to all the text content contained in the element, regardless of the level in the subtree. When used to read values, innerText concatenates the values of all the text nodes in the subtree in depth-first order.

Take a look at the following HTML code:

<div id="content"> 
 	<p>This is a <strong>paragraph</strong> with a list following it.</p> 
   <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
   </ul> 
</div>
Copy the code

In this case

This is a paragraph with a list following it. 
Item 1 
Item 2 
Item 3
Copy the code

div.innerText = "Hello & welcome, \"reader\"! ";
Copy the code

<div id="content">Hello &amp; welcome, &lt; b&gt; &quot; reader&quot; ! &lt;/b> </div>
Copy the code

div.innerText = div.innerText;
Copy the code