JS在HTML页面的加载机制

最新推荐文章于 2024-07-31 11:05:25 发布

降蛇伏猫喵

最新推荐文章于 2024-07-31 11:05:25 发布

阅读量1k

点赞数

分类专栏： HTML JAVASCRIPT 文章标签： HTML JAVASCRIPT

本文链接：https://blog.csdn.net/jmsl1533/article/details/91443030

版权

JAVASCRIPT 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 1 订阅

订阅专栏

浏览器在获得一个html之后，会“自上而下”加载，并且在加载过程中进行解析渲染。

如果含有JavaScript代码，HTML页面的执行过程也不会变。在调用js代码时，就需要考虑代码执行顺序的问题，如下面例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var p = document.querySelector(".p");
			console.log(p);
		</script>
	</head>
	<body>
		<p class="p">这是一段文字</p>
	</body>
</html>

这段代码用到了一个document.querySelector()方法，该方法会返回文档中与指定选择器或选择器组匹配的第一个 html元素Element。如果找不到匹配项，则返回null。

代码的目的是获取p元素，但执行结果是null。说明没有找到class为p的元素。

改进代码后，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p class="p">这是一段文字</p>
		<script type="text/javascript">
			var p = document.querySelector(".p");
			console.log(p);
		</script>
	</body>
</html>

把js代码放到<body>内，则得到我们要的结果，执行结果如下：

降蛇伏猫喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS在HTML页面的加载机制

浏览器在获得一个html之后，会“自上而下”加载，并且在加载过程中进行解析渲染。如果含有JavaScript代码，HTML页面的执行过程也不会变。在调用js代码时，就需要考虑代码执行顺序的问题，如下面例子：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title&...
复制链接

扫一扫

专栏目录