innerHTML 在内部对 DOM 做了什么？

Question

考虑片段-

<html >
    <script>    
        function  test(){

            function getPosition(parent, descendant) {
                return parent.compareDocumentPosition(descendant);
            }
            var p = document.getElementById("myPara");
            console.log(getPosition(document, p));          // 20


            console.log(document.body.innerHTML);           

            document.body.innerHTML += "<p>It's clobberin' time!</p>";
            console.log(getPosition(document, p));          // 37 WHY?


            console.log(document.getElementById("myPara") === p); // false WHY?
        }

    </script>
    <body>
        <p id="myPara">Its a paragraph</p>
        <button onclick="test()">Press Me!</button>
    </body>
</html>

赋值打印前的document.body.innerHTML

"
        <p id="myPara">Its a paragraph</p>
        <button onclick="test()">Press Me!</button>

"

在控制台上。

这里有 2 个问题-

为什么是console.log(getPosition(document, p)); // 37 WHY? 元素 <p>It's clobberin' time!</p> 附加到 innerHTML 但是为什么弄乱了元素的位置由 myPara.
其次，console.log(document.getElementById("myPara") === p); // false，为什么？

Answer 1

我通常不会经常看到 .innerHTML +=。我想这可以添加到元素中已经存在的任何内容上......如果它被设置为右值，则 .innerHTML 旨在更改它在 DOM 中馈送的任何 object/element 的内容'='.

它是错误的，因为它不仅仅是一个空元素，而且您使用的 === 表示类型和值。

Answer 2

发生这种情况是因为每次设置 innerHTML 时，都会重新解析 HTML 文档，构建 DOM 并将其添加到您的文档中。这也会使您对 DOM 元素的所有现有引用无效。

正确的方法是创建一个新元素并将其附加到文档正文中。通过这种方式，您可以避免上面呈现的整个混乱局面，至少对于没有对这种用法进行任何优化的浏览器（不确定是否有优化？）

替换您的附加行：

       document.body.innerHTML += "<p>It's clobberin' time!</p>";

有了这个：

        var myElement = document.createElement('p');
        myElement.innerHTML = '<p>Its clobbering time</p>';
        document.body.appendChild(myElement);

现在你会看到：

        console.log(getPosition(document, p)); // is still 20
        console.log(document.getElementById("myPara") === p); // is now TRUE

innerHTML 在内部对 DOM 做了什么？

What innerHTML internally does to the DOM?

javascript

innerhtml