基础巩固javascript(一）引入资源位置

最新推荐文章于 2023-08-02 16:00:33 发布

前端小白白菜

最新推荐文章于 2023-08-02 16:00:33 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/u014182959/article/details/86180254

版权

javascript放置位置：

无论是<script>标签还是外部文件引入，都一样

1）<head> 这里 </head>

2) <body> 这里 </body> 或者 </body>这里</html>

两种方式的区别：

第一种方式引入的，在dom加载之前加载js，一般引入不需要操作dom的js资源，如js插件等

第二种方式引入的，在dom(即界面元素)加载之后加载js,在</body>后引入的是dom全部加载完再加载js,在</body>前引入的只是<script>标签前的dom加载完再加载dom

<!DOCTYPE html>
<html>
<head>
	<title>js引入位置</title>
	<style type="text/css">
		.text{
			color: pink;
		}
	</style>
	<script type="text/javascript">
		alert("head 引入的js无法操作dom元素（此时dom未创建），以下报错Uncaught TypeError: Cannot set property 'innerHTML' of null");
		var $p=document.getElementById("p1");
		$p.innerHTML="head  引入";

	</script>
</head>
	<body>
		<p class="text" id="p1">hi!</p>
		<script type="text/javascript">
		var $p=document.getElementById("p1");
		//$p.innerHTML="body 引入";
			
	</script>
	</body>
	
</html>