轻松学习JavaScript十九：DOM编程之在HTML文档什么位置编写JS代码

来源：互联网发布：剑三男神脸数据下载编辑：程序博客网时间：2024/05/03 19:16

转载自：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代码

[html] view plaincopyprint?
<!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代码

[html] view plaincopyprint?
<!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代码

[html] view plaincopyprint?
<!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标签之后。

在说第四种情况之前我么先来一个做一个小的测试：

[html] view plaincopyprint?
<!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标签之前

[html] view plaincopyprint?
<!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编程学习更是要

严谨和规范，要不出现错误了，自己都不知道。

0 0