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,省了很多的 ...
随机推荐
- 微信小程序路由跳转（navigateTo，redirectTo ，switchTab ，reLaunch ）
navigateTo, redirectTo 只能打开非 tabBar 页面. switchTab 只能打开 tabBar 页面. reLaunch 可以打开任意页面. 通过redirect重定向的页 ...
- display有哪些值？说明他们的作用?
inline(默认)— 内联 none — 隐藏 block — 显示.块级元素(单独占一行) inline-block — 行内块元素(不占整行) table — 表格显示 list-item — ...
- Java实现 LeetCode 590 N叉树的后序遍历（遍历树，迭代法）
590. N叉树的后序遍历 给定一个 N 叉树,返回其节点值的后序遍历. 例如,给定一个 3叉树 : 返回其后序遍历: [5,6,3,2,4,1]. 说明: 递归法很简单,你可以使用迭代法完成此题吗? ...
- Java实现 LeetCode 43 字符串相乘
43. 字符串相乘 给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式. 示例 1: 输入: num1 = "2& ...
- Java实现 LeetCode 15 三数之和
15. 三数之和 给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 注意:答案中不可以 ...
- Java实现指定年份月份的日历表
输入指定的年份与月份,看这个月的日历表 package Xueying_Liu; import java.util.Scanner; public class rilibiao { public st ...
- Java实现第十届蓝桥杯特别数的和
试题 F: 特别数的和 时间限制: 1.0s 内存限制: 512.0MB 本题总分:15 分 [问题描述] 小明对数位中含有 2.0.1.9 的数字很感兴趣(不包括前导 0),在 1 到 40 中这样 ...
- 容器技术之Docker私有镜像仓库docker-distribution
在前边的博客中我们说到docker的架构由docker客户端.服务端以及仓库组成:docker仓库就是用来存放镜像的地方:其实docker registry我们理解为存放docker镜像仓库的仓库比较 ...
- 如何快速的找到好玩的旅游景点信息？Python爬虫帮你轻松解决
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 喜欢的朋友欢迎关注小编 当我们出去旅游时,会看这个地方有哪些旅游景点,景点 ...
- 源码分析（5）-ArrayList、Vector和LinkedList（JDK1.8）
一.概述 1.线程安全:ArrayList和LinkedList非线程安全的.Vector线程安全的. 2.底层数据结构:ArrayList和Vector底层数据结构是数组:LinkedList双向链 ...