Pourquoi document.write ne peut-il pas être utilisé pour charger un module en utilisant Dom-scripting?

Question

En this question, j'ai eu la réponse suivante:

Regarder le script de cartes de Google, il est ne pas charger le module de géocodage parce qu'il utilise document.write pour le faire, une méthode qui doit être exécuté à partir d'un inclus dans le code HTML document au moment de l'analyse, pas importé par l'utilisation de scripts DOM comme vous le faites ici.

Quelle est une méthode qui doit être exécutée à partir d'un inclus dans le html au moment de pare? Comment puis-je faire cela? Qu'est-ce qui est importé par l'utilisation de DOM-scripting? Comment reconnaître les scripts DOM?

Je suis assez nouveau pour javascript et je ne comprends pas vraiment la référence ici.

Answer 1

document.write est une ancienne méthode qui insère du code HTML dans la page pendant le chargement de, à l'emplacement du script. Pour cette raison, il est couramment utilisé dans les «widgets» JavaScript qui peuvent être copiés-collés dans une page Web. Cependant, si la page a fini de charger, tout ce qu'elle fait est de commencer la création d'une nouvelle page avec ce code HTML.

<div id="foo"> 
    <script type="text/javascript"> 
     document.write("<h1>Main title</h1>") 
    </script> 
</div> 

Ceci est en contraste avec les fonctions que jQuery fournit ou les méthodes DOM sous-jacents qu'il utilise, qui doivent appeler fois la page chargée:

// The jQuery way 
$(document).ready(function() { 
    $('#foo').append('<h1>Main title</h1>'); 
}); 

// The plain JS way 
window.onload = function() { 
    var h1 = document.createElement('h1'); 
    h1.appendChild(document.createTextNode('Main title')); 
    document.getElementById('foo').appendChild(h1); 
}; 

S'il est tout simplement Impossible de changer le widget (par exemple il est servi par un tiers), et vous devez, par exemple, charger les widgets de jQuery, vous pouvez override the document.write and document.writeln functions faire ce que vous voulez juste avant de le charger. Gardez à l'esprit que pour que cela fonctionne correctement quand il y a plusieurs widgets sur une page, vous devez vous assurer que le premier gadget est complètement chargé avant même d'essayer de charger le second.

Answer 2

Le script isDom est lorsque vous travaillez sur un document déjà chargé, et que vous manipulez les "éléments DOM" (DOM = "modèle d'objet de document" .... représentations javascript des composants d'une page web). Vous pouvez ajouter et supprimer des éléments, et manipuler leurs propriétés telles que les styles et le contenu. Par opposition à la modification du texte html lui-même, avant qu'il ne soit transformé en éléments, avec document.write. document.write fonctionne uniquement au tout début, lorsque la page est convertie du texte en composants de page Web. C'est la "vieille façon", car à l'époque javascript, c'était la seule façon de faire les choses. Il y a des cas où c'est encore utile, mais en général on l'évite ces jours-ci.

Exemple de script dom:

var elem = document.getElementById("someelement"); 
var childElem = document.createElement ("DIV"); 
childElem.innerHTML = "this is a <i><b>test</b></i>"; 
elem.appendChild (childElem); 

Notez que l'utilisation de « innerHTML » est un raccourci commun qui est un peu dans le moyen terme. Il est utilisé après le chargement de la page, mais il fonctionne en fournissant du code html textuel. Selon le contexte, il peut ou non être considéré comme un «script dom».