转载自:http://blog.csdn.net/erlian1992/article/details/50332671
在学习DOM编程的时候又回过头去看了过去写的JS代码,并没有考虑在什么位置编写JS代码更加符合规范以及
当HTML文档加载完毕后再运行JS代码的问题。在刚接触JS的时候,写过一篇博文:轻松学习JavaScript三:
JavaScript与HTML的结合,只是单纯就HTML与JS的结合说明JS代码放在什么位置,可能一些还是错的,现在开始
在博文中纠错。开始学习DOM编程的时候又遇到了新的问题,那就是HTML文档未加载完毕先执行了JS代码并没有得
到我们想象中的效果。那么我们就来看一下应该放在HTML文档什么位置,又怎样来解决HTML文档加载问题的?
从HTML文档出发,我们可以有以下几种在什么位置编写JS代码:
(1)直接在HTML页面编写JS代码
- <!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=gb2312" />
- <title>JS代码位置</title>
- </head>
-
- <body>
- <button id="button" onclick="alert('Hello world!')">点击我</button>
- </body>
- </html>
运行的结果:
缺点:1)JS和HTML强耦合,不利于代码的维护。
2)若onlick响应事件函数是比较复杂的,则需要先定义一个函数,然后再在onlick属性中完成对函数的引
用,比较麻烦。这样不利于代码的整洁程度,难以要实现JS和HTML以及CSS代码的分离。
(2)在body标签之前编写JS代码
- <!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=gb2312" />
- <title>JS代码位置</title>
- <script type="text/javascript">
- //获取button元素节点
- var btns=document.getElementById("btn");
- //为button添加响应时间函数
- btns.onclick=function(){
- alert("Hello world!");
- }
- </script>
- </head>
-
- <body>
- <button id="btn">点击我</button>
- </body>
- </html>
运行的结果是不符合我们所想要看到的:
运行结果是不会弹出Hello world!的警告框。那么是什么原因造成的呢?浏览器在加载HTML文档的时候回从上到
下依次进行解析,由于script标签内的JS代码先加载,body标签的内容后加载,在加载JS的代码的时候并没有button
标签,因此当整个HTML文档加载完毕后,并没有出现想要的结果。一般地,我们不能在body节点之前来直接获取
body内的节点,因为此时HTML文档树还没有加载完成,获取不到指定的节点。为了解决这个顺序的问题,我们可以
放在body标签之后,也就是下面的第三种。
(3)在body标签之后编写JS代码
- <!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=gb2312" />
- <title>JS代码位置</title>
- </head>
-
- <body>
- <button id="btn">点击我</button>
- </body>
- </html>
- <script type="text/javascript">
- //获取button元素节点
- var btns=document.getElementById("btn");
- //为button添加响应时间函数
- btns.onclick=function(){
- alert("Hello world!");
- }
- </script>
运行结果:
在整个HTML文档被加载完毕后,JS代码获取了其中的节点,因此出现了相应的结果。但是把script标签放在
HTML文档的最后,这并不符合JS代码习惯规范,通常我们会把JS代码还是放在body标签之前,也就是放在head标
签中,一般放在title标签之后。
在说第四种情况之前我么先来一个做一个小的测试:
- <!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=gb2312" />
- <title>无标题文档</title>
- <script type="text/javascript">
- alert("1");
- window.onload=function(){
- alert("4");
- }
- </script>
- </head>
-
- <body>
- <button onclick="alert('2')">点击我</button>
- </body>
- </html>
- <script type="text/javascript">
- alert("3");
- </script>
经过上面代码的测试,运行的结果是符合HTML文档加载的规则的,警告框出现的次序也是我们在代码中标注的
顺序。我们可以得出结论:window.onload事件是在整个HTML文档被完全加载后再执行的,所以在其中可以获取到
HTML文档的任何元素。
(4)利用window.onload事件将JS代码放在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=gb2312" />
- <title>JS代码位置</title>
- <script type="text/javascript">
- //window.onload事件是在整个HTML文档加载完毕后才执行的
- window.onload=function(){
- //获取button元素节点
- var btns=document.getElementById("btn");
- //为button添加响应时间函数
- btns.onclick=function(){
- alert("Hello world!");
- }
- }
- </script>
- </head>
-
- <body>
- <button id="btn">点击我</button>
- </body>
- </html>
运行的结果:
一般地,在body节点之前编写JS代码,但需要利用window.onload事件,该事件在当前文档完全加载完毕之后被
触发,所以其中的代码可以获取到当前文档的任何节点。 因此推荐使用的就是最后一种,代码习惯规范我们是必须遵
守的,这样有利于代码的维护和整洁程度。当然了,如果JS代码很多的话,我们总是将JS代码放在JS文件里,然后
利用script标签引入JS文件,这在前面已经说过了。
每次学习的深入都是前面所学知识的加深,也是在自我查错,看了自己以前写的JS代码,真是一塌糊涂,整个
HTML文档每个位置都有JS代码,这就降低了可维护性,要是代码量很多的话,很难维护。因此,从今天起要重新审
视过去写JS代码的行为,翻开前面的博文去改正,也算是加深理解和为了养成习惯吧。后面的DOM编程学习更是要
严谨和规范,要不出现错误了,自己都不知道。