Content of html page changed by jQuery but "View Source" don't reflect the changes

Question

jQuery: v1.7.1
Hello guys,
I changed the img attributes from jQuery Like this:

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

Changes are reflected in the browser but,
1) when I checked the "view source code" there were no changes(it was original html) which were changed by the js ,why? Like this:

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

2) And when I checked from Firebug it showed the changes made by jquery ?

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

Whats going on here ?
Q) Are the changes made to DOM done in memory ? and How can firebug show it ?

Answer 1

The source code never changes. When you "view source" that just shows you exactly what the browser received from the server.

It is the DOM (Document Object Model) that you are manipulating, not the HTML.

The initial DOM state is a representation of the source HTML, but it is not permanently linked with the source HTML. Javascript changes the DOM but not the HTML. See here for a full explanation of the DOM: http://www.w3.org/TR/DOM-Level-2-Core/introduction.html

The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

And a relevant quote from the page under the heading "What the DOM is not":

The Document Object Model is not a way of persisting objects to XML or HTML. Instead of specifying how objects may be represented in XML, the DOM specifies how XML and HTML documents are represented as objects, so that they may be used in object oriented programs.

Firebug (and other developer tool frameworks), similarly, show you the current state of the DOM (because that's what is dynamic). That's why see the change in Firebug, but not in the source code view.

Answer 2

Any way, it is also possible to see current state of your DOM. you can select all, through CTRL+A and then right-click go for View Selection Source!!