JS代码放在head和body中的区别分析
更新时间：2011年12月01日 00:02:08 作者：
放在head中的JS代码会在页面加载完成之前就读取，而放在body中的JS代码，会在整个页面加载完成之后读取
那么有什么不同呢？先看一个例子：
一个二级级联动态下拉列表框，一级分类（即大类别）id="vSort0".
<head>
function changelocation(id)
{…………}
</head>
<body><select class="input1" id="vSort0" name="vSort0" onChange="changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value);" style="width:100px;">……省略……</select>
………………
</body>
现在有个js脚本：
<script LANGUAGE= "JavaScript" >
changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value); //初始化第一个一级分类的二级分类，去掉后第一个一级分类的二级分类在页面载入之后不显示。回选才显示。将一级分类的value传给changelocation()函数,生成二级分类的列表
</script>
那么把这个js脚本放head里面还是body里面呢？
答案是不仅要放到body里面，而且还得放到定义id='vSort0'的列表框后面，因为这个js脚本中有document.form4.vSort0.selectedIndex，如果放到head里或者body的id='vSort0'前，页面加载后顺序执行代码，执行到这个js发现vSort0未定义（即undefind），这个js也就失去了作用。
而为什么我们经常看到有很多的人把js脚本放到head里面没事呢？对！
就是因为你看到的在head里的js代码有onclick等事件传递了变量给函数。
这就告诉我们，如果我们想定义一个全局对象，而这个对象与页面中的某个按钮（等等）有关时， 我们必须将其放入body中，道理很明显：如果放入head，那当页面加载head部分的时候，那个按钮（等等）都还没有被定义（也可以说是还没有被加 载，因为加载的过程就是执行代码的过程，包括了定义），你能得到的只可能是一个undefind。
一个二级级联动态下拉列表框，一级分类（即大类别）id="vSort0".
复制代码 代码如下:
<head>
function changelocation(id)
{…………}
</head>
<body><select class="input1" id="vSort0" name="vSort0" onChange="changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value);" style="width:100px;">……省略……</select>
………………
</body>
现在有个js脚本：
复制代码 代码如下:
<script LANGUAGE= "JavaScript" >
changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value); //初始化第一个一级分类的二级分类，去掉后第一个一级分类的二级分类在页面载入之后不显示。回选才显示。将一级分类的value传给changelocation()函数,生成二级分类的列表
</script>
那么把这个js脚本放head里面还是body里面呢？
答案是不仅要放到body里面，而且还得放到定义id='vSort0'的列表框后面，因为这个js脚本中有document.form4.vSort0.selectedIndex，如果放到head里或者body的id='vSort0'前，页面加载后顺序执行代码，执行到这个js发现vSort0未定义（即undefind），这个js也就失去了作用。
而为什么我们经常看到有很多的人把js脚本放到head里面没事呢？对！
就是因为你看到的在head里的js代码有onclick等事件传递了变量给函数。
这就告诉我们，如果我们想定义一个全局对象，而这个对象与页面中的某个按钮（等等）有关时， 我们必须将其放入body中，道理很明显：如果放入head，那当页面加载head部分的时候，那个按钮（等等）都还没有被定义（也可以说是还没有被加 载，因为加载的过程就是执行代码的过程，包括了定义），你能得到的只可能是一个undefind。
您可能感兴趣的文章:
相关文章
一个跟随鼠标的小手效果，鼠标移在哪里，小手就跟着移向哪里，会出现手的效果，放在链接上的时候，手会变化，两只手很可爱哦，JS鼠标跟随代码分享与大家。2013-05-05
uniapp实现app检查更新与升级详解(uni-upgrade-center)
UniApp是一个跨平台的开发框架,可以同时开发iOS和Android应用,下面这篇文章主要给大家介绍了关于uniapp实现app检查更新与升级(uni-upgrade-center)的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要为大家介绍了Fuse.js模糊查询算法学习指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了微信小程序实现的一键复制功能,结合实例形式分析了微信小程序wx.setClipboardData接口实现操作粘贴板进行复制操作的相关使用技巧,需要的朋友可以参考下2019-04-04
JS轻松实现CSS设置,DIV+CSS常用CSS设置...2007-02-02
JavaScript console对象与控制台使用示例详解
这篇文章主要介绍了JavaScript console对象与控制台的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
这篇文章主要介绍了javascript判断复选框是否选中的方法，需要的朋友可以参考下2015-10-10
基于 Bootstrap Datetimepicker 联动
这篇文章主要介绍了基于bootstrap datetimepicker 联动效果,需要的朋友可以参考下2017-08-08
这篇文章主要介绍了taro 实现购物车逻辑，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
下面小编就为大家带来一篇浅谈JavaScript 浏览器对象。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
最新评论