script位置影响执行时机以及script的执行和DOM加载之间的微妙关系

调试过程中的思考：
==================================================================
DOM的加载和script执行之间的关系:先执行script代码，再加载DOM。
在执行document.getElementsByTagName('div');时，还没有加载div元素
所以获取不到div元素。
==================================================================
<html>
<head>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var elem = document.createElement('div');
document.body.appendChild(elem);
console.log("=============毛泽东==============");
}
</script>
</head>
<body>
<div>
<p>自信人生二百年</p>
<p>会当水击三千里</p>
</div>
</body>
</html>
==================================================================
转换script的位置将会出现什么问题：
加载完DOM元素后，执行script。此时可以获取div元素。
==================================================================
<html>
<head>
</head>
<body>
<div>
<p>自信人生二百年</p>
<p>会当水击三千里</p>
</div>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var elem = document.createElement('div');
document.body.appendChild(elem);
console.log("=============毛泽东==============");
}
</script>
</body>
</html>
==================================================================
换成事件触发机制又会怎样：在点击按钮触发事件时，执行create函数。
再点击之前DOM已经加载完毕，而且这个事件可以看作button的方法属性。
==================================================================
<html>
<head>
<script type="text/javascript">
function create() {
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var elem = document.createElement('div');
document.body.appendChild(elem);
console.log("=============毛泽东==============");
}
}
</script>
</head>
<body>
<div>
<p>自信人生二百年</p>
<p>会当水击三千里</p>
</div>
<input type="button" value="create" onclick='create()'/>
</body>
</html>
==================================================================
学会使用console.log();定位错误。
如何定位?折半查找，缩小搜索范围。
定位到错误后，反思解决。
做笔记，记录下这类错误。
==================================================================

script位置影响执行时机以及script的执行和DOM加载之间的微妙关系

猜你喜欢