代码之家 › 专栏 › 技术社区 › ram

动态更新DOM时,为什么html源代码不改变

browser dom html jquery javascript

ram · 技术社区 · 16 年前

我之前发布了一个问题 jQuery inconsistency in setting readonly attribute in IE-8 and FF-3.5.8 对这个答案很满意。

但我注意到,如果动态更新(任何??)DOM元素,那么view source(使用浏览器的view source)我发现更新后的DOM元素属性保留了它以前的值(在更新之前)。但是,如果使用Firebug/IE开发人员工具栏,它将显示更新的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中,第一个文本框被设置为readonly document.ready 方法。用浏览器查看源代码会得到如下标记

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

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

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

2 回复 | 直到 5 年前

kemiller2002 16 年前

Jared Updike 16 年前

一些浏览器有DOM检查器,例如,safari4.0有一个很棒的DOM浏览器,可以帮助您动态地查看生成的元素及其CSS样式。

推荐文章

Robo Robok · 为什么我无法使用Dom\HTMLDocument搜索标签?

1 年前

Y-jiji · 调整大小时替换了假选择

1 年前

LLScheme · 无法使用Playwright&Pyppeteer找到关键字

1 年前

Konrad Viltersten · 无法修改ViewContainerRef的内部内容,只能在Angular中添加标签

1 年前

Eric G · 如何将svg文本元素垂直居中?

2 年前

Nail Val · 当条件通过时,If语句不显示console.log,并按意外情况继续工作

2 年前

Juan Lanus · 如何获取对所选内容的DOM元素的引用

2 年前

huz3y · addEventListener不适用于从javascript添加的新类所选的元素

2 年前

Toby Hogan · 元素React状态更改后未在DOM中更新

2 年前

user23745914 · 能够访问javascript中的dom元素,而无需显式定义查询选择器

2 年前