现在，我们来研究一下如何解决这个问题，解决方法就是在dom加载完毕之后就执行程序。
先介绍两个人。一，jquery的作者：john resig；二，javascript的世界级大师：dean edwards。（大家要记住这两位天才！）
jquery里有专门解决dom加载的函数$(document).ready()（简写就是$(fn)），非常好用！john resig在《pro javascript techniques》里，有这样一个方法处理dom加载，原理就是通过document&& document.getelementsbytagname &&document.getelementbyid&& document.body 去判断dom树是否加载完毕。代码如下：
复制代码 代码如下:
function domready( f ) {
// 如果dom加载完毕，马上执行函数
if ( domready.done ) return f();   
// 假如我们已增加一个函数
if ( domready.timer ) { 
// 把它加入待执行的函数清单中
domready.ready.push( f ); 
} else { 
// 为页面加载完成绑定一个事件, 
// 为防止它最先完成. 使用 addevent（下面列出）.
addevent( window, “load”, isdomready );   
// 初始化待执行的函数的数组
domready.ready = [ f ];   
// 经可能快地检查dom是否已可用
domready.timer = setinterval( isdomready, 13 ); 
} 
}  
// 检查dom是否已可操作
function isdomready() { 
// 假如已检查出dom已可用, 忽略 
if ( domready.done ) return false;   
// 检查若干函数和元素是否可用
if ( document &&  document.getelementsbytagname &&  document.getelementbyid &&  document.body ) {   
// 假如可用, 停止检查
clearinterval( domready.timer ); 
domready.timer = null;   
// 执行所有等待的函数
for ( var i = 0; i domready.ready[i]();   
// 记录在此已经完成
domready.ready = null; 
domready.done = true; 
} 
}
// 由 dean edwards 在2005 所编写addevent/removeevent,
// 由 tino zijdel整理
// http://dean.edwards.name/weblog/2005/10/add-event/
//优点是1.可以在所有浏览器工作；
//2.this指向当前元素；
//3.综合了所有浏览器防止默认行为和阻止事件冒泡的的函数
//缺点就是仅在冒泡阶段工作
function addevent(element, type, handler) {
    // assign each event handler a unique id
    if (!handler.$$guid) handler.$$guid = addevent.guid++;
    // create a hash table of event types for the element
    if (!element.events) element.events = {};
    // create a hash table of event handlers for each element/event pair
    var handlers = element.events[type];
    if (!handlers) {
        handlers = element.events[type] = {};
        // store the existing event handler (if there is one)
        if (element[on + type]) {
            handlers[0] = element[on + type];
        }
    }
    // store the event handler in the hash table
    handlers[handler.$$guid] = handler;
    // assign a global event handler to do all the work
    element[on + type] = handleevent;
};
// a counter used to create unique ids
addevent.guid = 1;
function removeevent(element, type, handler) {
    // delete the event handler from the hash table
    if (element.events && element.events[type]) {
        delete element.events[type][handler.$$guid];
    }
};
function handleevent(event) {
    var returnvalue = true;
    // grab the event object (ie uses a global event object)
    event = event || fixevent(window.event);
    // get a reference to the hash table of event handlers
    var handlers = this.events[event.type];
    // execute each event handler
    for (var i in handlers) {
        this.$$handleevent = handlers[i];
        if (this.$$handleevent(event) === false) {
            returnvalue = false;
        }
    }
    return returnvalue;
};
function fixevent(event) {
    // add w3c standard event methods
    event.preventdefault = fixevent.preventdefault;
    event.stoppropagation = fixevent.stoppropagation;
    return event;
};
fixevent.preventdefault = function() {
    this.returnvalue = false;
};
fixevent.stoppropagation = function() {
    this.cancelbubble = true;
};
还有一个估计由几个外国大师合作写的，实现同样功能。
复制代码 代码如下:
/*
* (c)2006 jesse skinner/dean edwards/matthias miller/john resig
* special thanks to dan webb's domready.js prototype extension
* and simon willison's addloadevent
*
* for more info, see:
* http://www.thefutureoftheweb.com/blog/adddomloadevent
* http://dean.edwards.name/weblog/2006/06/again/
* http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
* http://simon.incutio.com/archive/2004/05/26/addloadevent
* 
*
* to use: call adddomloadevent one or more times with functions, ie:
*
*    function something() {
*       // do something
*    }
*    adddomloadevent(something);
*
*    adddomloadevent(function() {
*        // do other stuff
*    });
*
*/
adddomloadevent = (function(){
    // create event function stack
    var load_events = [],
        load_timer,
        script,
        done,
        exec,
        old_onload,
        init = function () {
            done = true;
            // kill the timer
            clearinterval(load_timer);
            // execute each function in the stack in the order they were added
            while (exec = load_events.shift())
                exec();
            if (script) script.onreadystatechange = '';
        };
    return function (func) {
        // if the init function was already ran, just run this function now and stop
        if (done) return func();
        if (!load_events[0]) {
            // for mozilla/opera9
            if (document.addeventlistener)
                document.addeventlistener(domcontentloaded, init, false);
            // for internet explorer
            /*@cc_on @*/
            /*@if (@_win32)
                document.write(