I’m looking for a way to put a piece of plain javascript in the header, and have it hook the page load so that as each tag or element loads it can look at it, test for a specific name, id, or class, and if it meets the requirements then perform some manipulation. Alternately, have it fire after DOM has updated with each new chunk of downloaded page. In the meantime, the page would of course keep loading, but I’m willing to do the debugging to figure out any caveats and issues.
If the browser does the filtering for me, awesome, otherwise I’ll have to test the element type and name each time, and I understand that would slow down page rendering in the worst case. I’m primarily concerned with Firefox, because I’m looking to create Greasemonkey scripts, but cross platform would be great.
The reason for this is to keep from loading a page with the wrong style until the end, then have it jump into the new style. A lot of other sites that aren’t usable until DOM completion could benefit from early bound javascript, too, I think.
You will need to hook into the DOMNodeInserted event. This event bubbles, allowing you to monitor the whole document by registering the event at the document level.
Since this will only be supported on modern browsers, you may also have to run an interval timer to periodically check for new DOM elements. You should be careful that your code here is not too inefficient. You may want to assume that if there were, say, 15 elements last time you checked, then you only need to check from the 16th element onwards (in a document.getElementsByTagName(‘*’) search or something).