jQuery_页面加载问题

运行如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>页面未加载执行失败</title>
        <script type="text/javascript">
            document.getElementById("panel").onclick = function() {
                alert("元素已经加载完毕 !");
            }

        </script>
    </head>

    <body>
        <div id="panel">click me.</div>
    </body>

</html>

发现怎么点都不会出现提示的内容，这是为什么呢

那是因为dom还未加载完毕，那么如何解决呢？

　　　　　　　　方式一：将JS代码移到需要操作的html代码后面，建议放到body的外面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>4-1-2</title>
    </head>

    <body>
        <div id="panel">click me.</div>
        <script type="text/javascript">
                document.getElementById("panel").onclick = function() {
                    alert("元素已经加载完毕 !");
                }
        </script>
    </body>

</html>

方法二：将其写入页面加载函数，这样也可以