contenido de la página html cambiado por jQuery, pero "Ver código fuente" no reflejan los cambios

Question

jQuery: v1.7.1
Hola chicos,
he cambiado los atributos de IMG de jQuery De esta manera:

 $("document").ready(function() { 
     $("img").attr({ src: "images/Spring.jpg", alt: "spring" }); 
    }); 

Los cambios se reflejan en el navegador pero,
1) cuando revisé el "código fuente de vista" no hubo cambios (fue html original) que fueron cambiados por el js, ¿por qué? De esta manera:

<a href="images/Grass.jpg"> 
    <img src="images/Grass.jpg" alt="image"/> </a> 

2) Y cuando llegué de Firebug que mostró los cambios hechos por jQuery?

<a href="images/Grass.jpg"> 
<img alt="spring" src="images/Spring.jpg"> </a> 

¿Qué está pasando aquí?
Q) ¿Los cambios realizados en DOM se realizan en la memoria? y ¿Cómo puede Firebug mostrarlo?

Answer 1

El código fuente nunca cambios. Cuando "ve la fuente" que solo muestra exactamente lo que el navegador recibió del servidor.

Es DOM (Modelo de objeto de documento) que está manipulando, no el HTML.

El estado DOM inicial es una representación del código fuente HTML, pero no está permanentemente vinculado con el código fuente HTML. Javascript cambia el DOM pero no el HTML. Vea aquí para una explicación completa de la DOM: http://www.w3.org/TR/DOM-Level-2-Core/introduction.html

El Document Object Model (DOM) es una interfaz de programación de de aplicaciones (API) para HTML válido y documentos XML bien formados. Es define la estructura lógica de documentos y la forma en que un documento es accedido y manipulado.

y una cita relevante de la página, bajo el título "Lo que el DOM no es":

El Document Object Model no es una forma de persistencia de objetos a XML o HTML . En lugar de especificar cómo se pueden representar los objetos en XML, el DOM especifica cómo se representan los documentos XML y HTML como objetos, , de modo que puedan usarse en programas orientados a objetos.

Firebug (y otros marcos de herramientas de desarrollador), de forma similar, le muestran el estado actual del DOM (porque eso es lo que es dinámico). Es por eso que ver el cambio en Firebug, pero no en la vista del código fuente.

Answer 2

De cualquier forma, también es posible ver el estado actual de su DOM. puede seleccionar todo, a través de CTRL + A y luego haga clic derecho vaya por Ver origen de selección!