理论上，JavaScript脚本可以放置在页面的任何位置。比如放置在head或者body之中，甚至放置在html标签之外都可以正常的运行。
在编写html文档时，javascript放置的地方，对 JavaScript 代码的正常执行会有一定影响。由于 HTML 文档是由浏览器从上到下依次载入的，javascript的放置位置主要影响获取网页元素。
简言之：
如果放在head里面，初始化页面的时候就会首先加载
如果放在body里面，等页面初始化完成，才去加载。
一.放置于<head></head>标签之间:
`<!DOCTYPE html>`
`<``html``>`
`<``head``>`
`<``meta` `charset``=``" utf-8"``>`
`<``meta` `name``=``"author"` `content``=``"[http://www.softwhy.com/](http://www.softwhy.com/)"` `/>`
`<``title``>爱前端</``title``>`
`<``script``>`
`document.write("爱前端");`
`</``script``> `
`</``head``>`
`<``body``>`
`</``body``>`
`</``html``>`
将js代码插入到<head>与</head>之间；js代码需要用<script>标签包裹。
二.放置于<body></body>标签之间:
将js脚本代码放置于<body></body>标签之间可以避免脚本代码找不到对象的情况。
举个例子，如果在html页面执行过程中遇到一段脚本代码需要操作html中的元素<div id="test">。代码是顺序执行的，执行这段脚本代码的时候页面还没有加载<div id="test">，于是就出现找不到对象这种错误。如果把javascript脚本代码放置在<body></body>标签的最底端就可以避免这种情况。
`<!DOCTYPE html>`
`<``html``>`
`<``head``>`
`<``meta` `charset``=``" utf-8"``>`
`<``meta` `name``=``"author"` `content``=``"[http://www.softwhy.com/](http://www.softwhy.com/)"` `/>`
`<``title``>爱前端</``title``>`
`<``script``>`
`var odiv = document.getElementById("ant");`
`odiv.innerHTML = "爱前端";`
`</``script``>`
`</``head``>`
`<``body``>`
`<``div` `id``=``"ant"``></``div``>`
`</``body``>`
`</``html``>`
上面的代码无法获取div元素，因为执行js代码的时候，div元素还没有加载完成。
修改如下:
`<!DOCTYPE html>`
`<``html``>`
`<``head``>`
`<``meta` `charset``=``" utf-8"``>`
`<``meta` `name``=``"author"` `content``=``"[http://www.softwhy.com/](http://www.softwhy.com/)"` `/>`
`<``title``>爱前端</``title``>`
`</``head``>`
`<``body``>`
`<``div` `id``=``"ant"``></``div``>`
`<``script``>`
`var odiv = document.getElementById("ant");`
`odiv.innerHTML = "爱前端";`
`</``script``>`
`</``body``>`
`</``html``>`
上面的代码可以在div中写入"爱前端"。
三.导入外部js文件:
js代码量较大时，导入外部js文件一种比较好的方式。
当JavaScript代码量较大的时候，如果还是写在html页面内，页面将会非常的庞大，不利于管理，所以把大量的javascript代码放入到一个独立js文件中，再将文件导入页面将是一种好的选择。
一般是放在<head></head>标签之内。
引用方式:
<head>
<meta charset=" utf-8">
<title>爱前端</title>
<script src="js.js"></script>
</head>
专注全栈大前端，爱前端整理了一批2019年最新WEB前端教学视频，不论是零基础想要学习前端还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。 全栈大前端学习交流群：137503198 点击加入群聊，即可免费获取。
网友评论