运行如下代码：
<!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>
方法二：将其写入页面加载函数，这样也可以