script写在head与写在body中的区别
咱先说将Javascript写在head里面的情况吧,如果你要在这里面去操控DOM元素,是会报错的,因为浏览器是先执行head标签里面的内容,在执行时你的DOM元素还没有生成.(使用了windows.loader的除外,这个后面再说)
例子:
<html>
<head>
<script>
var mybtn = document.getElementById('mybtn')
console.log(mybtn)
</script>
</head> <body>
<div id="toolbar">
<input type='button' value="My" id="mybtn"></input>
</div>
</div>
</body>
</html>
在这一段中输出的结果为null,在head标签中多数是用来引入数据和方法的,不会对DOM元素进行修改
如果将上面的script移动到body中呢(放在所有元素的后面)
<html>
<head>
</head> <body>
<div id="toolbar">
<input type='button' value="My" id="mybtn"></input>
</div>
</div>
<script>
var mybtn = document.getElementById('mybtn')
console.log(mybtn)
</script>
</body>
</html>
现在你可以看到输出了正确的DOM元素
因为当浏览器执行到script时,DOM元素都已经生成好了,所以可以看到正确的DOM
window.loader // 当页面DOM生成完毕后执行
注意:window.loader一个页面只能有一个
例:
<html>
<head>
<script>
window.onload = function(){
var mybtn = document.getElementById('mybtn')
console.log(mybtn)
}
</script>
</head>
<body>
<div id="toolbar">
<input type='button' value="My" id="mybtn"></input>
</div>
</div>
</body>
</html>
现在你也能看见你输出的DOM了
script写在head与写在body中的区别的更多相关文章
- JavaScript写在Html页面的<head></head>中
JavaScript写在Html页面的<head></head>中 ----------------- <html> <head> <style ...
- 有一字符串，包含n个字符。写一函数，将此字符串中从第m个字符开始的全部字符复制成为另一个字符串。
[提交][状态][讨论版] 题目描述 有一字符串,包含n个字符.写一函数,将此字符串中从第m个字符开始的全部字符复制成为另一个字符串. 输入 数字n 一行字符串 数字m 输出 从m开始的子串 样例输入 ...
- Markdown: 用写代码的思维写文档
作者:吴香伟 发表于 2014/08/07 版权声明:可以任意转载,转载时务必以超链接形式标明文章原始出处和作者信息以及版权声明 本文不讲解Markdown的语法规则,只关注它带来的好处以及我使用的方 ...
- struts2 action配置时 method 省略不写 默认执行方法是父类ActionSuppot中的execute()方法
struts2 action配置时 method 省略不写 默认执行方法是父类ActionSuppot中的execute()方法
- 面试题-->写一个函数，返回一个数组中所有元素被第一个元素除的结果
package com.rui.test; import java.util.Random; /** * @author poseidon * @version 1.0 * @date:2015年10 ...
- IntelliJ下使用Code/Live Template加快编码速度：程序员的工作不是写程序，而是写程序解决问题
程序员的工作不是写程序,而是写程序解决问题. --- 某不知名程序员 我们每天都在写代码,有些代码有结构性的相似,但不是所有的代码都可以被抽成方法.在这种情况下,我们应该考虑使用template的方式 ...
- 会写网页 就会写手机APP -- Hybrid Mobile Apps for ASP.NET Developers
您好,这篇文章是我的BLOG发出,原始出处在此: 会写网页 就会写手机APP -- Hybrid Mobile Apps for ASP.NET Developers http://www.dotbl ...
- ios属性和成员变量写在.h文件和.m文件中 区别？
1 其实是一样的.在.m文件上只能.m文件内部的才能访问的这个变量,如果在.h文件中,其他的文件也可以访问到这个变量. 2 写.h文件里边可以和其他的类进行交互,写.m里边只是在本类中使用! 3 ...
- hql中不能写count(1)能够写count(a.id)
hql中不能写count(1)能够写count(a.id)里面写详细的属性 String hql="select new com.haiyisoft.vo.entity.cc.repo.Bu ...
- vue 使用Jade模板写html，stylus写css
vue 使用Jade模板写html,stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的 ...
随机推荐
- Java实现 蓝桥杯VIP基础练习 矩形面积交
描述 平面上有两个矩形,它们的边平行于直角坐标系的X轴或Y轴.对于每个矩形,我们给出它的一对相对顶点的坐标,请你编程算出两个矩形的交的面积. 输入 输入仅包含两行,每行描述一个矩形. 在每行中,给出矩 ...
- java算法集训代码填空题练习3
1 数组转置 编写程序将2行3列的数组行列置换复制给3行2列的数组(即数组的转置).已经写了如下代码,请完善之: class y{ public static void main(String[] a ...
- java实现第N个素数
素数就是不能再进行等分的整数.比如:7,11.而9不是素数,因为它可以平分为3等份.一般认为最小的素数是2,接着是3,5,... 请问,第100002(十万零二)个素数是多少? 请注意:2 是第一素数 ...
- Java实现微生物增殖
微生物增殖 假设有两种微生物 X 和 Y X出生后每隔3分钟分裂一次(数目加倍),Y出生后每隔2分钟分裂一次(数目加倍). 一个新出生的X,半分钟之后吃掉1个Y,并且,从此开始,每隔1分钟吃1个Y. ...
- Java实现第九届蓝桥杯字母阵列
字母阵列 题目描述 仔细寻找,会发现:在下面的8x8的方阵中,隐藏着字母序列:"LANQIAO". SLANQIAO ZOEXCCGB MOAYWKHI BCCIPLJQ SLAN ...
- Say Something About Of Flash Android
Why am I need say something about of flash android? It's at my college life when I touch flash andro ...
- 从0到70%：Chrome上位揭秘！
最近的数据显示,Chrome在2020年4月的市场份额达到了70%左右,把微软的Edge和Firefox远远甩在身后,毫无疑问,Chrome赢得了第二次游览器之战,成为新一代王者. Chrome的第一 ...
- 关联函数-web_save_param_length
int web_save_param_length(const char * Param,const char * Base,LAST); 参数说明: Param:保存长度的参数的名称. Base:参 ...
- MySQL——事务(Transaction)详解
原文:https://blog.csdn.net/w_linux/article/details/79666086
- 8种排序算法 Java实现
冒泡排序 O(n2) 两个数比较大小,较大的数下沉,较小的数冒起来. public static void bubbleSort(int[] a) { //临时变量 int temp; //i是循环次 ...