Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I had posted one question earlier jQuery inconsistency in setting readonly attribute in IE-8 and FF-3.5.8 and was quite happy with the answer.

But I did notice that if you update (any??) DOM elements dynamically, then view source (using browser's view source) I find the updated DOM element attribute retains its older value(before update). However, if you use Firebug/IE Developer toolbar, it displays the updated DOM

Example:http://gutfullofbeer.net/readonly.html

FF3.5-View page Source:

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

Here the first text box is set to readonly in jQuery's document.ready method. Viewing the source with browser would give a markup like

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

and Firebug will give something like

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

IE8 Developer toolbar:

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

So my guess is that the browser (IE8/FF3.5) generates the html source much earlier before DOM events kick in (in my case it is jQuery's document.ready() )

Can someone tell me whats happening behind the scene ?

like image 763
ram Avatar asked Mar 08 '10 20:03

ram


People also ask

How do you refresh a DOM in HTML?

The location reload() method in HTML DOM is used to reload the current document. This method refreshes the current documents. It is similar to the refresh button in the browser.

How does DOM change value?

Change the Value of an Attribute In the DOM, attributes are nodes. Unlike element nodes, attribute nodes have text values. The way to change the value of an attribute, is to change its text value. This can be done using the setAttribute() method or setting the nodeValue property of the attribute node.

Are DOM updates synchronous?

log() yields this result isn't surprising because a DOM update is a synchronous event.

Does CSS manipulate the DOM?

No, CSS does not change the DOM.


2 Answers

The view source is the source downloaded to the browser. What happens in memory doesn't get updated in the source.

like image 179
kemiller2002 Avatar answered Nov 15 '22 00:11

kemiller2002


Several browsers have DOM inspectors, for example, Safari 4.0 has a great DOM browser that helps you view dynamically generated elements and their CSS styles dynamically.

like image 21
Jared Updike Avatar answered Nov 14 '22 23:11

Jared Updike