一.<script>放在前面与后面的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页换扶</title>
</head>
<script type="text/javascript">
alert("aaaaaaaaaaaaaaaaaa"); //可执行
document.getElementById("btn").onclick= function(){
alert("abcde");//可执行
}
</script>
<body>
<input type="button" id="btn" value="test"/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页换扶</title>
</head>
<body>
<input type="button" id="btn" value="test"/>
<script type="text/javascript">
alert("aaaaaaaaaaaaaaaaaa");//可执行
document.getElementById("btn").onclick= function(){
alert("abcde");//不可执行
}
</script>
</body>
</html>
二者区别：
如果JavaScript文件是从HTML文档的<head>部分用<script>标签调用的，它将在HTML文档之前加载到浏览器里。同样如果<script>标签位于文档底部</body>之前，就不能保证哪个文件最先结束加载（浏览器可能一次加载多个）。因为脚本加载时文档可能不完整，所以模型也不完整。
放在body的情况：实现某些部分动态的创建文档，如上述的点击事件（只有当页面加载后会对鼠标位置进行计算，想放在前面的话，可采用如下方法：
<script type="text/javascript">
alert("aaaaaaaaaaaaaaaaaa");
window.onload = function () {
document.getElementById("btn").onclick = function () {
alert("abcde");
}
};
</script>
二.js获取属性的三个方法
1.点表示法
用于查找本来就存在的属性名，不能找到变量或者函数的参数。
2.方括号法
可以通过变量来访问属性。
3.通过DOM的方式
获取属性的值：getAttribute(属性名)
设置属性的值：setAttribute(属性名，要设置的值)
删除属性：removeAttribute(属性名)
三.js闭包作用域问题
例子：在for循环中嵌套一个事件函数
<!--html-->
<div class="but">
<button type="button" class="but1">变宽</button>
<button type="button" class="but1">变高</button>
<button type="button" class="but1">变色</button>
<button type="button" class="but1">隐藏</button>
<button type="button" class="but1">重置</button>
</div>
<!--script-->
var but = document.getElementsByClassName("but1");
for(var i = 0;i < but.length; i++) {
but[i].onclick = function () {
alert(i); //i永远是5
}
}
onclick事件是个匿名函数，它在用户点击的时候才会被调用（即for循环已执行完毕，此时i=5。因此，在onclick事件内形成了闭包，使它无法访问外部的i，此问题的关键在于作用域的问题。
解决方案:
法一:我们可以让i在每次迭代的时候，都产生一个私有的作用域，在这个私有的作用域中保存当前i的值。
//法一
for(var i = 0;i < but.length; i++) {
（function (i) {
but[i].onclick = function () {
alert(i);
}
})(i);
}
//法二
for(let i = 0;i < but.length; i++) {
but[i].onclick = function () {
alert(i);
}
}
