簡體   English   中英

為什么動態更新 DOM 時 html 源代碼不會改變

[英]Why would html source not change when the DOM is updated dynamically

我之前發布了一個問題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()

有人能告訴我幕后發生了什么嗎?

查看源是下載到瀏覽器的源。 內存中發生的事情不會在源中更新。

一些瀏覽器都有 DOM 檢查器,例如,Safari 4.0 有一個很棒的 DOM 瀏覽器,可以幫助您動態查看動態生成的元素及其 CSS 樣式。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM