Advanced JavaScript Programming a mentionné le concept d'opération court-circuité en parlant d'erreurs dans IE :
Une erreur se produira lors de la modification d'une page qui n'a pas encore été chargée.
Un exemple de code est :
<body>
<p></p>
<p>
<script>
document.body.appendChild(document.createElement("p"));
</script>
</p>
</body>
Lorsque <script> est inclus dans un élément et que le code JS utilise les méthodes DOM pour modifier son élément parent ou son élément ancêtre, une erreur d'abandon d'opération se produit (car seuls les éléments chargés peuvent être modifiés).
et changé en
document.body.insertChild(document.createElement("p"),document.body.firstChild);Vous pouvez éviter les erreurs.
Si le nouveau <p> est ajouté au début de document.body au lieu de la fin, il n'y aura pas d'erreur.
Après l'avoir lu, je ne comprends pas très bien comment le document est chargé. Pourquoi ça marche s'il est inséré au début du corps, mais pas à la fin ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Lorsque le navigateur chargera la page, il chargera et analysera le code js. À ce moment, il arrêtera l'analyse et le rendu des autres codes. C'est pourquoi on met généralement du code js en fin de page. Il n'organise pas le chargement de la structure du document de la page et peut opérer sur tous les éléments du DOM.
Dans le code ci-dessus, lorsque le code js est exécuté, la structure html de la page entière n'a pas été chargée, donc le navigateur ne connaît pas la position finale du corps, et la position de départ du corps a été déterminée, donc le nouveau p peut être ajouté au début. Ne peut pas être ajouté à la fin.
Étapes pour charger le document DOM
1 Analysez la structure HTML.
2 Chargez des scripts externes et des fichiers de feuilles de style.
3 Analysez et exécutez le code du script.
4 Construisez un modèle HTML DOM. //DOMContentLoaded
5 charge des fichiers externes tels que des images.
6 La page est chargée. //charger
C'est théoriquement vrai, mais en pratique, l'emplacement du contenu du document doit également être pris en compte. Puisqu'il est analysé de haut en bas, lors de la rencontre avec js, cela bloquera le rendu pour l'analyse et l'exécution de js.
Le problème que vous avez mentionné, je suppose, est dû au fait que la partie avant du corps a été rendue, mais la partie queue n'a pas été rendue lors de l'exécution, c'est-à-dire que je ne sais pas où insérer la partie queue.
En raison de l'optimisation des opérations DOM dans les navigateurs modernes, je ne trouve aucune erreur lors des tests sur Chrome. Les deux méthodes conviennent, il n'est donc pas nécessaire de prêter trop d'attention à ce problème. N'oubliez pas de rendre séquentiellement et de mettre. js en bas.