DOM疑惑点整理（三）

innerHTML和outerHTML

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

<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>

执行效果等于：css

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

而outerHTML的执行，java

<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-的那个无做用域的问题（这个也是众所周知的）。code

小细节：

<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>

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

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会使得被修改的本来的文本节点，所有被销毁。
⑤二者可能由于浏览器不一样，输出的文本格式略有差异get