为什么动态更新DOM时html源不会改变答案

【问题标题】：Why would html source not change when the DOM is updated dynamically为什么动态更新DOM时html源不会改变
【发布时间】：2011-01-25 03:46:55
【问题描述】：

我之前曾在jQuery inconsistency in setting readonly attribute in IE-8 and FF-3.5.8 发布过一个问题，并且对答案非常满意。

但我确实注意到，如果您动态更新（任何？？）DOM 元素，然后查看源代码（使用浏览器的查看源代码），我发现更新后的 DOM 元素属性会保留其旧值（更新之前）。但是，如果您使用 Firebug/IE Developer 工具栏，它会显示更新后的 DOM

例如：http://gutfullofbeer.net/readonly.html

FF3.5-查看页面来源：

<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>

这里第一个文本框在 jQuery 的document.ready 方法中设置为只读。使用浏览器查看源代码会给出类似

的标记

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

Firebug 会给出类似的东西

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

IE8 开发工具栏：

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

所以我的猜测是浏览器 (IE8/FF3.5) 在 DOM 事件启动之前更早地生成了 html 源代码（在我的例子中是 jQuery 的 document.ready() ）

谁能告诉我幕后发生了什么？

【问题讨论】：

标签： javascript jquery html dom browser

【解决方案1】：

查看源是下载到浏览器的源。内存中发生的事情不会在源中更新。

【讨论】：

因为源是服务器端，而 Dom 是在客户端操作的。
从技术上讲，源并不“必须”成为服务器端。您可以通过访问驱动器上的本地页面来加载它。

【解决方案2】：

一些浏览器都有 DOM 检查器，例如，Safari 4.0 有一个很棒的 DOM 浏览器，可以帮助您动态查看动态生成的元素及其 CSS 样式。

【讨论】：

假设它类似于 Firebug/IE Developer 工具栏？
@Ram 是的，是一样的想法。