本文分析JavaScript代码置于head与body中的执行差异。通过二级联动下拉列表示例，说明若脚本在页面加载时直接访问未渲染的DOM元素（如select），将导致undefined错误。结论是：涉及即时DOM操作的脚本必须置于对应HTML元素之后，而仅绑定事件的脚本可置于head中。
JavaScript加载位置对DOM访问的影响
那么具体存在哪些差异呢？我们可以通过一个实际案例来观察。
假设有一个二级联动的动态下拉列表框，其中一级分类（即大类别）的id属性被设置为"vSort0"。
相关的HTML结构代码如下：
<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>接下来考虑一个JavaScript脚本片段：
代码如下：
<script LANGUAGE= "JavaScript" >
changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value); //初始化第一个一级分类的二级分类，去掉后第一个一级分类的二级分类在页面载入之后不显示。回选才显示。将一级分类的value传给changelocation()函数,生成二级分类的列表
</script>head与body中脚本执行的差异分析
现在的问题是：这段JavaScript脚本应该放置在head标签内还是body标签内？
答案不仅是放入body中，而且必须放置在定义id为'vSort0'的列表框HTML代码之后。原因是该脚本中使用了document.form4.vSort0.selectedIndex来访问元素，如果脚本放在head中，或者放在body中但位于id='vSort0'元素之前，当页面按顺序加载执行代码时，执行到该JavaScript脚本会发现vSort0尚未定义（即状态为undefined），导致脚本失效。
那么，为什么我们经常看到许多人的JavaScript代码直接放在head标签中却运行正常呢？
这是因为那些在head中运行的JavaScript代码通常只是定义函数，并通过onclick等事件将变量传递给函数，而不涉及页面加载时的即时DOM访问。
这揭示了一个重要原则：如果我们希望定义一个全局对象，且该对象与页面中的某个按钮（或其他交互元素）直接相关，我们必须将其代码放入body中，并置于对应HTML元素之后。道理很明确：如果放在head中，当页面加载head部分时，那个按钮（或其他元素）尚未被定义（也可以理解为尚未被加载，因为加载过程即执行代码的过程，包括定义），此时你只能得到undefined的结果。