script标签写在head里面和body里面有什么区别

最新推荐文章于 2022-09-27 18:38:08 发布
最新推荐文章于 2022-09-27 18:38:08 发布
阅读量279 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44669966/article/details/123277107
版权

以下面的例子为例：
js代码卸写在head里面,此时body还未加载，所以是获取不到id=container的节点的。所以会报错。
而js代码在body中，此时网页已经加载完毕了，所以js就可以找到id=container的节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		
		<script type="text/javascript">
			var a = document.getElementById('container').innerText
			console.log("head中：", a)
		</script>
		
	</head>
	<body>
		<div id="container">内容</div>
		<button type="button" id="btn">更新</button>
		
		<script type="text/javascript">
			var b = document.getElementById('container').innerText
			console.log("body中：", b)
		</script>
		
	</body>
</html>

代码执行结果：
在这里插入图片描述

我是一个小稻米
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS代码放在head和body中的区别分析
12-10
JavaScript代码在HTML文档中的位置，通常有两种选择：`<head>`和`<body>`标签内。这两种放置方式会对脚本的执行时机和效果产生显著的影响。我们通过一个具体例子来详细探讨它们之间的区别。 首先，当JavaScript代码...
JavaScript动态添加css样式和script标签
12-10
当`<script>`标签被添加到`<head>`或`<body>`后，浏览器会异步下载指定的JavaScript文件，并在下载完成后执行其中的代码。 **注意事项：** 1. **异步加载：** 动态添加的`<script>`标签默认是异步加载的，这意味着...
script标签放在head标签与body标签中的区别
qq_43635212的博客
03-28 1630
html代码是从上往下依次执行,<script>放在<head>中时，会在页面加载之前加载到浏览器里，放在<body>中时，会在页面加载完成之后读取。 所以：在head中checkInput1 为undefined，而在body的script标签中checkInput2为Object <html> <head> <tit...
描述一下脚本＜script＞放在＜head＞和放到＜body＞底部的区别
欣欣酱博客
02-20 2905
------- 放<head>中的情况：脚本会优先加载，但加载过程中，<body>还没加载完，会使脚本访问不到<body>中的元素。 放<body>底部：脚本在<body>加载后加载，能够保证脚本有效地访问<body>的元素。 ------- html渲染执行的顺序为从上到下的一个执行顺序，首先第一步执行head中的内容，如果有外联样式，则下载外联样式，如果有script标签，那么浏览器的渲染引擎则停止，交给JavaScript引
＜script＞标签写在head和写在body中有什么区别
水镜先生的博客
08-19 5391
前端知识
script 标签放在head内和body内有什么区别（十七）
kiku
10-10 1637
< script> 标签放在head内和body内有什么区别 加载的顺序不一样，你可以把ＨＴＭＬ看成从上往下加载的。 例如在网速慢的情况下把ｊｓ代码放在ｂｏｄｙ底部用户会先看到网页结构，等ｊｓ加载完成后才出现特效 区别简述： 在HTML body部分中的JavaScripts会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行，但是在主页...
javascript写在head标签中产生的报错.pdf
12-16
`<head>`部分包含了一个`<script>`标签，里面有一些JavaScript代码。这段代码试图通过`getElementById`方法获取ID为"xx"的`<p>`元素，并显示一些关于这个元素的信息。然而，当浏览器解析HTML时，它会先执行`<head>`...
js原生跨域_用script标签的简单实现
01-21
作为新手,就写一下简单的吧,院子里面有很多大牛, 说句实话,他们的很多代码我都看不懂. 我就写一下新手看的懂得吧, 多说一句,我觉得大牛写的代码应该通俗易懂才可以。. 代码非常的简单,但是写的过程中,仍然发生了一些...
动态创建script标签实现跨域资源访问的方法介绍
09-04
1. **动态创建`<script>`标签**：当需要异步加载JavaScript资源或执行跨域请求时，可以动态创建`<script>`元素并将其插入到文档的`<head>`或`<body>`中。在示例中，`request`函数用于创建和插入`<script>`标签，其`...
＜script＞放在head内和body内的区别
Q1368089323的博客
12-13 2346
1.区别简述： 在HTML body部分中的JavaScripts会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行，但是在主页和其余部分代码之前预先装载。 加载的顺序不一样，你可以把ＨＴＭＬ看成从上往下加载的。 例如在网速慢的情况下把ｊｓ代码放在ｂｏｄｙ底部用户会先看到网页结构，等ｊｓ加载完成后才出现特效 2.JavaScript的位置 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分
script 写在body和head中的区别
m0_51865787的博客
10-31 468
script 写在body和head中的区别 区别简述： 在HTML body部分中的JavaScripts会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行。 —————————————————————————— JavaScript应放在哪里 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。 body 部分中的脚本: 当页面被加载时立即
script在head和在body中的区别
qq_43654065的博客
01-19 3566
转载：原博文 加载的顺序不一样，html是从上往下加载的。如果在网速慢的情况下把js代码放在body底部用户会先看到网页结构，等js加载完成后才出现特效。 区别： 在HTML body部分中的JavaScript会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行，但是在主页和其余部分代码之前预先装载。 1. JavaScript应放在哪里 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部
script在head和在body中的区别(面试题)
qq_52499745的博客
09-27 349
script在head和在body中的区别(面试题)
script中获取不到元素id
weixin_34087503的博客
12-11 329
<head><script type="text/javascript"> function getchange(){ var date = new Date(); var sec = date.getSeconds(); var spanNode = document.getElementById("time"); spanNode....
script body html,Script Element Between Head and Body. [HTML5] [closed]
weixin_42545503的博客
06-18 60
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):问题:When validating with W3C, I received the response: script element between head and body. [HTML5]How is this specific to HTML5 versus regular XHTML v...
JS中script代码放在header和body的区别
qq_29735775的博客
07-28 6454
1 body和header中JavaScript执行的时机 1.1 header中 　　　　放在header中的javascript代码会进行预加载（即：在页面加载之前就会进行），所以需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。 　　　　坑01：header中的JavaScript只是比页面先加载，...
<script>标签放在head和放在body有什么好处和坏处
最新发布
05-31
将<script>标签放在<head>标签中的好处是可以提高网站的加载速度，因为它们会在页面的其余部分加载之前被加载和解析。这可以确保脚本在页面显示之前可用并且能够更快地运行。但是，如果您的脚本涉及文档对象模型（DOM）的操作，则会导致页面停止响应，因为DOM尚未完全加载。 将<script>标签放在<body>标签中的好处是可以确保DOM已完全加载，从而避免了上述问题。此外，放在<body>标签中的脚本可以访问<body>中的任何元素，这对于与页面元素交互的脚本非常有用。但是，这可能会导致页面加载速度变慢，因为脚本将在页面加载后才被加载和解析。 因此，选择将<script>标签放在<head>或<body>中取决于您的脚本的性质和对页面加载速度和响应时间的优先级。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值