DOM疑惑点整理

Posted 2021-03-24 homehtml

innerhtml和outerHTML

先说一个几乎众所周知的，innerHTML和outerHTML中的内容都会被解析为DOM子树，其二就是，

<div id="txt" style="width: 100px;height: 100px;border: 1px solid black;"></div>
<script type="text/javascript">
    let txt = document.getElementById("txt");
    txt.innerHTML = "<p>txt</p>";
</script>

执行效果等于：

<div id="txt" style="width: 100px;height: 100px;border: 1px solid black;">
    <p>txt</p>
</div>

而outerHTML的执行，

<div id="txt" style="width: 100px;height: 100px;border: 1px solid black;"></div>
    <script type="text/javascript">
        let txt = document.getElementById("txt");
        txt.outerHTML = "<p>txt</p>";
    </script>

执行效果等于：

<p>txt</p>

就是原本的div消失了，调用outer HTML的整个节点全部被替换了。但是该div还存在，并没有被删除，可以通过console.log(txt)看到它。
好的，这些是众所周知的。
在使用innerHTML或者outerHTML过程中，会有一个小细节，有关script的，但并不是script在ie8-的那个无作用域的问题（这个也是众所周知的）。

小细节：

<script type="text/javascript">
    let txt = document.getElementById("txt");
    txt.innerHTML = "<div id="txt1">1</div>";
    txt.innerHTML = "<script id="txt2">var a = 1;</script>";
</script>

这样的代码，在浏览器运行会出错，出错处在第四行，修改第四行为如下，就不会报错：

txt.innerHTML = "<script id="txt2">var a = 1;</script>";

需要你加一个转义符号，反观第三行结尾不需要转义符也不会出错。
原因是浏览器解析时遇到</script>就会认为是结束标签就会和第一行的<script>相照应，这个原因应该也是众所周知吧，值得注意的就是记住，用innerHTML的时候，如果有</script>,记得转义符。

innerText和outerText

两者最大区别就是是否会改变调用它们的节点自身，类似上面innerHTML与outerHTML的其二中所描述。
outerText并未写入规范，不建议使用，而且会导致调用它的节点自身消失。
innerText与textContent区别总结:
①<script>和<style>标签的内容，innerText会忽略，后者不会。
②如果innerText中有css内容，就会触发回流，页面重绘（浏览器会根据元素的新属性重新绘制，使元素呈现新的外观），后者不会
③innerText不返回隐藏样式，后者不懂，因此后者全部返回
④ie<=11中，innerText会使得被修改的原本的文本节点，全部被销毁。
⑤两者可能因为浏览器不同，输出的文本格式略有差别