Tuesday, January 3rd, 2006

When do DOM elements become available?

Category: JavaScript

Dave Flanagan asks: when do DOM elements become available to embedded scripts?

(i)f you have an element <div id=”foo”>, when can you call getElementById(‘foo’) and be sure that you’ll get a valid result?”

It should be so simple!

Most people rely on window.onload, though that’s usually later than need be, and Dave comments that it’s not even guaranteed anyway; his main issue here seems to be that the specs are ambiguous and the browsers are inconsistent. Knowing more about this could lead to some nice performance optimisations. Dave points to Dean Edwards’ neat hacks, which are very useful if browser-dependent. Dave’s seeking feedback on these issues from anyone in the know.

Posted by Michael Mahemoff at 7:22 pm

4.4 rating from 34 votes


Comments feed TrackBack URI

I’ve wondered the same thing, especially regarding whether it’s possible to call getElementById('foo') from within the <div id=”foo”>…</div>. I did a little experimentation earlier which suggested that it is possible. It definitely appears to be possible to call getElementsByTagName('html') from within the &;t;head> (and obviously before <html> is closed).

Comment by Mark Kawakami — January 4, 2006

document.getElementById() appears to work if placed after the elements in question under IE, but in my opinion it’s really best if this method is left until window.onload() before being called.

As Mark mentioned above, I’ve found that using getElementsByTagName() works nicely (and cross-browser) before .onload if placed in a script block just before – eg. getElementsByTagName(‘html’)[0].getElementsByTagName(‘div’)[1] – though it’s harder to target an individual item as with getElementById. (A loop checking for a given class name or other attribute could be written, for example.)

To keep things clean, the script block can just be a one-line function call at this point; the important thing is the timing, ie. that the browser will have parsed and is aware of all other elements (minus itself) by that time.

Comment by Scott Schiller — January 4, 2006

Sorry, forgot I couldn’t put any HTML in the posts. Should read, “in a script block just before the close of the body tag.”

Dean Edwards isn’t a fan of inserting script calls in the document, but it’s been the most reliable method for my own use.

Comment by Scott Schiller — January 4, 2006

[…] http://ajaxian.com/archives/when-do-dom-elements-become-available […]

Pingback by Project :: penkiblog » Blog Archive » 本日書籤 — January 4, 2006

I am developing AJAX application
I am calling asp page onload through showdata() function from .js file which gets data through asp page and fills innerhtml of div
and again in that asp page am calling showdata() with defer attribute.
and fills another div. It is working fine in IE but not in mozilla.

flow is like this main.html ->sub1.asp-sub2.asp but boths asp page’s result i want in main html.


Comment by sandeep — May 31, 2006

Leave a comment

You must be logged in to post a comment.