01-html的执行顺序
刚开始学习html时,<head><body><title>
等标签搞晕了我,有些执行顺序上的事情没有考虑到,导致代码已经修改结果还是无动于衷,例如:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>执行顺序</title>
<script type="text/javascript" >
function a(){
alert('a:hello,world!')
}
function a(){
alert('b:hello,world!')
}
document.getElementById("btn").onclick=function a(){
alert('c:hello,world!')
}
</script>
</head>
<body>
<input type="button" value="按我有窗口跳转" id="btn" onclick="a()"/>
</body>
浏览器执行html结果是弹窗’c:hello,world’,后面的getElementById根本没有被执行。原因是html自上而下执行,当执行到getELementById时,由于还没有加载下方<body>的btn,所以他找不到这个元素,因此无法将alert的内容变成‘c:hello,world!',因此会跳过这行不执行。
<body>
<input type="button" value="按我有窗口跳转" id="btn" onclick="a()"/>
<script type="text/javascript" >
function a(){
alert('a:hello,world!')
}
function a(){
alert('b:hello,world!')
}
document.getElementById("btn").onclick=function a(){
alert('c:hello,world!')
}
</script>
</body>
btn已经加载完毕,后面的alert无论 修改了几遍,都能找到btn元素并且执行修改,因此,最后弹窗alert的语句是‘c:hello,world!'
小结:
- html自上而下执行
- getElementById若找不到指定id的元素,则会跳过不执行
参考: