简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Wie wird der DOM-Baum geladen?
天蓬老师
天蓬老师 2017-05-19 10:42:33
0
2
434

Advanced JavaScript Programming erwähnte das Konzept der Operation kurz, wenn es um Fehler im IE ging:

Beim Ändern einer Seite, die noch nicht geladen wurde, tritt ein Fehler auf.

Beispielcode ist: 

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

Wenn <script> in einem Element enthalten ist und der JS-Code DOM-Methoden verwendet, um sein übergeordnetes Element oder Vorgängerelement zu ändern, tritt ein Vorgangsabbruchfehler auf (da nur geladene Elemente geändert werden können).

und in

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

Sie können Fehler vermeiden.

Wenn das neue <p> am Anfang von document.body und nicht am Ende hinzugefügt wird, tritt kein Fehler auf.

Nachdem ich es gelesen habe, verstehe ich nicht ganz, wie das Dokument geladen wird, wenn es am Anfang des Hauptteils eingefügt wird, aber nicht am Ende.

天蓬老师
天蓬老师

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

Antworte allen(2)
曾经蜡笔没有小新
曾经蜡笔没有小新2017-05-19 10:44:33 2 Etage

浏览器加载页面时，碰到 js 代码会进行加载和解析，这时候就会中止其他代码的解析和渲染。这就是为什么我们一般把 js 代码放在页面尾部的原因，不组织页面文档结构的加载，而且可以对所有的 DOM 元素进行操作。

上面代码中，在执行那一句 js 代码时，整个页面的 html 结构还没有加载完成，所以浏览器并不知道 body 的末尾位置，而 body 开头位置已经确定了，所以新 p 可以添加到开头而不能添加到结尾。

Wie +0
Antwort hinzufügen
小葫芦
小葫芦2017-05-19 10:44:33 1 Etage

DOM文档加载的步骤
1 解析HTML结构。
2 加载外部脚本和样式表文件。
3 解析并执行脚本代码。
4 构造HTML DOM模型。//DOMContentLoaded
5 加载图片等外部文件。
6 页面加载完毕。//load

理论上是这样，但实际还要考虑文档内容的位置，由于是从上到下解析，遇到js会阻塞渲染进行js解析和执行。

你所说的问题，我猜测是因为执行时body的前部已经渲染，而尾部未渲染导致的，就是不知道往哪插入尾部。

由于现代浏览器对DOM操作的优化，我在chrome上已经测试不出错误，两种都可以，所以没必要太过在意这个问题了，只要记得顺序渲染，js放底部就行。

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！