2010-03-08 7 views
4

j'avais posté une question plus tôt jQuery inconsistency in setting readonly attribute in IE-8 and FF-3.5.8 et était tout à fait satisfait de la réponse.Pourquoi serait source HTML change pas lorsque le DOM est mis à jour dynamiquement

Mais j'ai remarqué que si vous mettez à jour dynamiquement les éléments DOM, puis visualisez la source (en utilisant la source de vue du navigateur), l'attribut DOM actualisé conserve son ancienne valeur (avant la mise à jour). Toutefois, si vous utilisez Firebug/IE Developer Toolbar, il affiche la mise à jour DOM

Exemple: http://gutfullofbeer.net/readonly.html

FF3.5-source de la page:

<html> 
    <head> 
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script> 
    <script> 
     $(function() { 
     $('input.readonly').attr('readonly', true);//set input with CSS class readonly to readonly 
     }); 
    </script> 
    </head> 
    <body> 
    <input type='text' class='readonly' maxlength='20' value='Blort'>This one is read-only<br> 
    <input type='text' maxlength='20' value='Fish'>This one is not read-only<br> 

    </body> 
</html> 

Voici la première zone de texte est défini en lecture seule dans la méthode document.ready de jQuery. Affichage de la source par navigateur donnerait un balisage comme

<input type='text' class='readonly' maxlength='20' value='Blort'> 

et Firebug donnera quelque chose comme

<input type="text" value="Blort" maxlength="20" class="readonly" readonly=""> 

IE8 Developer Toolbar:

<input class="readonly" type="text" maxLength="20" readOnly="readonly" value="Blort"/>

Donc, je suppose que le navigateur (IE8/FF3.5) génère la source html beaucoup plus tôt avant les événements DOM entrent en jeu (dans mon cas, il est jQuery document.ready())

Quelqu'un peut-il me dire ce qu'il se passe derrière la scène?

Répondre

14

La source de vue est la source téléchargée sur le navigateur. Ce qui se passe en mémoire n'est pas mis à jour dans la source.

+1

comme source est côté serveur et Dom est manipulé du côté client. – Sinan

+2

Techniquement, la source n'a pas "besoin" d'être côté serveur. Vous pouvez le charger en accédant à une page localement sur le lecteur. – kemiller2002

3

Plusieurs navigateurs ont inspecteurs DOM, par exemple, Safari 4.0 a un grand navigateur DOM qui vous permet de voir les éléments et leurs styles CSS dynamiquement générés de façon dynamique.

+1

supposez-vous qu'il est similaire à la barre d'outils Firebug/IE Developer? – ram

+0

@Ram oui, c'est la même idée. – ghoppe

Questions connexes