DOM迷惑點整頓（三）

2019年8月24日 212次阅读 来源: 你才到碗里去

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會使得被修正的底本的文本節點，悉數被燒毀。
⑤二者能夠由於瀏覽器差異，輸出的文本格式略有差異

    原文作者：你才到碗里去
    原文地址: https://segmentfault.com/a/1190000014520460
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞