document.write vs document.getElementById

時間 2019-11-13

標籤 document.write document write document.getelementbyid getelementbyid 简体版

原文原文鏈接

document.write：html

JavaScript中對document.open所開啓的文檔流(document stream操做的API方法，它可以直接在文檔流中寫入字符串，一旦文檔流已經關閉，那document.write就會從新利用document.open打開新的文檔流並寫入，此時原來的文檔流會被清空，已渲染好的頁面就會被清除，瀏覽器將從新構建DOM並渲染新的頁面。瀏覽器

一.寫入文本（頁面加載中能夠寫入，而不會出現重寫頁面問題）oop

利用document.write來寫入腳本，先考慮以下代碼：url

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 </head>
 5 <body>
 6     <h1>Head</h1>
 7     <script>
 8         document.write('<p>hello document</p>');
 9     </script>
10     <h2>Tail</h2>
11 </body>
12 </html>

這段在h1和h2之間內嵌一個腳本，使用document.write來寫入一個p標籤。刷新頁面，能夠看到最終的結果是：spa

Head

hello document

Tail

即要文本在腳本執行的位置被插入。這是由於，瀏覽器就解析HTML構建DOM的時候，若是遇到script就會暫停下來，解析script中的代碼並執行，而後再繼續解析剩餘HTML。(阻塞進行的)此時再去瀏覽器中檢測DOM的結構，會發現script與h2之間多了一個p，瀏覽器在解析完h1以後，碰到script並執行之，此時document.write將一段HTML代碼寫入到文檔流中，script執行完畢後，瀏覽器會解析文檔流中的字符串，對新添加的p標籤進行解析。若是將渲染好的頁面保存下來，不一樣的瀏覽器會有不一樣的結果。如Chrome和Firefox的作保存下來的頁面文件中，script後面會增長p標籤，而IE中則是維持原狀。（這裏指的是原有的HTML結構，不一樣瀏覽器將頁面保存會做不一樣的處理，有些會增長一些不影響原有結構的標籤或註釋。這意味着，若是瀏覽器從新加載Chrome或Firefox中保存下來的頁面文件，就會多出一個p標籤。code

二.寫入腳本(注意加轉義符號)htm

既然document.write能夠寫入p並被瀏覽器解析，那麼天然地也能夠寫入script標籤。對象

<script>
    document.write('<script>alert("oops!!!")</script>');
</script>

將代碼做出上面的改動，意圖在利用document.write在頁面中插入一段腳本。這段代碼的本意是彈出一個窗口，阻塞瀏覽器對HTML的解析。瀏覽器下刷新頁面，發現並無論用，取而代之的是顯示出一個沒有意料到的頁面。blog

1 Head
2 
3 ');
4 Tail

去檢查DOM樹，就會發現，這段腳本被攔腰截斷了！瀏覽器將它解析成如下代碼：事件

1 <script>
2     document.write('<script>alert("oops!!!")
3 </script>
4 ');

插入文本中的</script>被當成了第一個script的閉合標籤，所以這個段代碼成了非法代碼，由於document.write的調用書寫不正確，缺乏右邊的括號)。此時，你能夠在console中看到相關的錯誤信息。(控制檯)解決這個問題，咱們能夠對插入文本中閉合的的標籤進行輕微修改，對最後一個>進行轉義，變成\>。此時再刷新一下頁面，就能夠看到預想中的結果。即頁面中僅顯示h1，彈窗阻塞了瀏覽器對HTML的解析，關閉彈窗後，瀏覽器繼續對HTML的解析並完成對頁面的渲染。再去看看DOM的結構，會發如今原有的script元素後面又多了一個新的<script>元素，其中所執行的代碼就是咱們的alert("opps!!!")。