简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 請問DOM樹是如何載入的？
天蓬老师
天蓬老师 2017-05-19 10:42:33
0
2
488

javascript高階程式設計講到IE中的錯誤時提到操作中止（operation shorted）這個概念：

在修改尚未載入完成的頁面會發生錯誤。

範例程式碼為：

<body>
    <p></p>
    <p>
        <script>
            document.body.appendChild(document.createElement("p"));
        </script>
    </p>
</body>

當<script>被包含在某個元素中，且JS程式碼要使用DOM方法修改其父元素或祖先元素，會發生操作中止錯誤（因為只能修改已經載入完的元素）。

而改為

document.body.insertChild(document.createElement("p"),document.body.firstChild);

就能避免錯誤。

說是新<p>加入document.body開頭而不是結尾，就沒有錯誤。

看了完就不太懂文件是如何載入的，為什麼插在body開頭就行，插在後面就不行。

天蓬老师
天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回覆(2)
曾经蜡笔没有小新
曾经蜡笔没有小新2017-05-19 10:44:33 2樓

瀏覽器載入頁面時，碰到 js 程式碼會進行載入和解析，這時候就會中止其他程式碼的解析和渲染。這就是為什麼我們一般把 js 程式碼放在頁面尾部的原因，不組織頁面文件結構的加載，而且可以對所有的 DOM 元素進行操作。

上面程式碼中，在執行那一句js 程式碼時，整個頁面的html 結構還沒有載入完成，所以瀏覽器並不知道body 的結尾位置，而body 開頭位置已經確定了，所以新p 可以加入到開頭而不能添加到結尾。

點贊 +0
新增回覆
小葫芦
小葫芦2017-05-19 10:44:33 1樓

DOM文件載入的步驟
1 解析HTML結構。
2 載入外部腳本和樣式表檔案。
3 解析並執行腳本程式碼。
4 構造HTML DOM模型。 //DOMContentLoaded
5 載入圖片等外部檔案。
6 頁面載入完畢。 //load

理論上是這樣，但實際上還要考慮文件內容的位置，由於是從上到下解析，遇到js會阻塞渲染進行js解析和執行。

你所說的問題，我猜測是因為執行時body的前部已經渲染，而尾部未渲染導致的，就是不知道往哪插入尾部。

由於現代瀏覽器對DOM操作的優化，我在chrome上已經測試不出錯誤，兩種都可以，所以沒必要太過在意這個問題了，只要記得順序渲染，js放底部就行。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！