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,省了很多的 ...
随机推荐
- Rocket - debug - Example: Triggers
https://mp.weixin.qq.com/s/zPNyrBOhsytkRrZTDTEvpw 介绍riscv-debug的使用实例:配置Triggers功能. 1. Trigger Trigge ...
- Chisel3 - util - Valid
https://mp.weixin.qq.com/s/L5eAwv--WzZdr-CfW2-XNA Chisel提供的Valid接口.如果valid为置1,则表明输出的bits有效:反之,则输出无 ...
- JSON.parse() 的实现
目录 1. JSON.parse() 2. 前置知识 2.1 JSON格式中的数据类型 2.2 转义字符的处理 2.2 判断对象是否相等 2.3 寻找匹配的字符串 2.4 基础的递归思想 3. 实现流 ...
- （二）用less+gulp+requireJs 搭建项目（gulp）
gulp是自动化构建工具,基于node,需要安装node,如果你不了解node也没关系,先跟着来一遍再去了解node也不迟~ 首先去node官网下载安装包 1.新建项目文件夹 在目录下shift+右键 ...
- LeetCode 74，直击BAT经典面试题
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题43篇文章,我们今天来看一下LeetCode当中的74题,搜索二维矩阵,search 2D Matrix. 这题的 ...
- Java实现 LeetCode 420 强密码检验器
420. 强密码检验器 一个强密码应满足以下所有条件: 由至少6个,至多20个字符组成. 至少包含一个小写字母,一个大写字母,和一个数字. 同一字符不能连续出现三次 (比如 "-aaa-&q ...
- Java实现蓝桥杯VIP算法训练 二元函数
试题 算法训练 二元函数 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 令二元函数f(x,y)=ax+by,a和b为整数,求一个表达式S的值. 只有满足以下要求的表达式才是合法的: ...
- Java实现拓扑排序
1 问题描述 给定一个有向图,求取此图的拓扑排序序列. 那么,何为拓扑排序? 定义:将有向图中的顶点以线性方式进行排序.即对于任何连接自顶点u到顶点v的有向边uv,在最后的排序结果中,顶点u总是在顶点 ...
- java实现第三届蓝桥杯机器人行走
机器人行走 [编程题](满分18分) 某少年宫引进了一批机器人小车.可以接受预先输入的指令,按指令行动.小车的基本动作很简单,只有3种:左转(记为L),右转(记为R),向前走若干厘米(直接记数字). ...
- 2.vue-常用指令
1.v-html:刷新的时候是整个DOM元素都会跟着一起进行刷新 v-text:直接刷新DOM种的text文本内容2.如果想在vue绑定html中的属性使用的是v-bind进行绑定的 v-bind:h ...