jQuery 更改了 html 页面的内容，但“查看源代码”不反映更改

Question

jQuery: v1.7.1
大家好，
我从 jQuery 中更改了 img 属性，如下所示：

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

更改会反映在浏览器中，但是，
1）当我检查“查看源代码”时，js没有改变（它是原始的html），为什么？ 像这样：

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

2) 当我从 Firebug 中检查时，它显示了 jquery 所做的更改？

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

这是怎么回事？
Q) 对 DOM 所做的更改是在内存中完成的吗？以及萤火虫如何显示它？

Answer 1

源代码从不改变。当您“查看源代码”时，它只会向您显示浏览器从服务器接收到的确切内容。

您正在操作的是 DOM（文档对象模型），而不是 HTML。

初始 DOM 状态是源 HTML 的表示，但它不会与源 HTML 永久链接。 Javascript 改变了 DOM 而不是 HTML。有关 DOM 的完整说明，请参见此处：http://www.w3.org/TR/DOM-Level-2-Core/introduction.html

文档对象模型 (DOM) 是一种应用程序编程 用于有效 HTML 和格式良好的 XML 文档的接口 (API)。它 定义文档的逻辑结构和文档的方式 访问和操纵。

以及页面标题“DOM 不是什么”下的相关引述：

文档对象模型不是将对象持久化为 XML 或 HTML。不是指定对象如何在 XML 中表示，而是 DOM 指定如何将 XML 和 HTML 文档表示为对象， 以便它们可以用于面向对象的程序中。

Firebug（和其他开发人员工具框架）类似地向您显示 DOM 的当前状态（因为那是动态的）。这就是为什么在 Firebug 中看到更改，但在源代码视图中看不到。

Answer 2

无论如何，也可以查看 DOM 的当前状态。你可以选择全部，通过CTRL+A然后右击去View Selection Source!!