DOM疑惑點整理（三）

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會使得被修改的本來的文本節點，所有被銷燬。
⑤二者可能由於瀏覽器不一樣，輸出的文本格式略有差異