html文档加载顺序简单理解
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="outUp1.js"></script> <script> alert("body上面的js!"); document.getElementsByTagName("div")[0].style.cssText = "background-color:red"; </script> <script src="outUp2.js"></script> <!--html文档按照从上往下的顺序加载,他没有找到div这个标签名,所以样式没有被修改 想要让上面引入的js文件在文档加载完成之后执行的话就需要用window.onload函数, 这样才不会出错。--> </head> <body> <div color="green">初始测试div</div> </body> <script src="outUp3.js"></script> <script> alert("body下面的js!"); </script> <script src="outUp4.js"></script> </html>
outUp1.js
alert("body上面的外部资源js1!");
document.getElementsByTagName("div")[0].style.cssText = "background-color:aqua;";
outUp2.js
alert("body上面的外部资源js2!");
document.getElementsByTagName("div")[0].style.cssText = "color:black;";
outDown1.js
alert("body下面的外部资源js3!");
document.getElementsByTagName("div")[0].style.cssText = "background-color:blue;";
outDown2.js
alert("body下面的外部资源js4!");
document.getElementsByTagName("div")[0].style.cssText = "color:red;";