Manipulate DOM before it is shown to the user?

Question

I'm not too familiar with javascript, is there a way to manipulate the DOM before the page is displayed to the user?

I'm using GWT which makes you create the page elements via javascript. This is kind of convenient, but it appears that all the javascript code is executed after the page is first shown to the user. This has the effect of showing the page as a blank white screen, then all the UI elements popping onto screen. The effect is really apparent when switching between pages.

If I were using php or jsp, it looks like the page ui elements are already prerendered and the browser won't show a blank white screen before display.

So is there any hook in javascript where we can manipulate the DOM before the browser clears out the contents of the last page shown?

-------------------------------- Edit ----------------------------------------

@Cipi: I'm not sure if this will work, but I can try. I think it will be the same problem though? I still see it happening like this:

1. User is already on one of my pages.
2. User clicks a link.
3. Browser starts fetching contents of new url, but the contents are simply an empty html file with just a javascript link in it.
4. After page is done downloading, browser renders the html (this is just a white screen).
5. Now the javascript starts executing in response to the onLoad() event(?), building the UI.
6. A few ms later, the DOM is done being manipulated, and is finally presented to the user.

so I am thinking that your solution would take place on #5, but by then the browser has already rendered the contents of the initial page on step #4?

@Crozin: I'm looking into DOMContentLoaded now, seems specific to gecko based browsers but there are solutions for ie etc. Yeah I basically want to manipulate the dom before the browser renders anything for the new page to screen, hopefully that can do it.

Thanks

Answer 1

Yes there are two methods:

1. Use DOMContentLoaded event

2. In the following code:

    .... <p id="abc">abc</p> <script type="text/javascript"> CODE HERE </script> <p id="def">def</p> 

   Element with id abc is avaiable, but the one with id def ain't.