Question

我之前发过一个问题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-View页面来源：

<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方法中设置为readonly。使用浏览器查看源代码会提供类似

的标记

<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()）

有人能告诉我幕后发生了什么事吗？

Answer 1

视图源是下载到浏览器的源。内存中发生的事情不会在源代码中更新。

Answer 2

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

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

2 个答案: