咱先说将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中的区别的更多相关文章

  1. JavaScript写在Html页面的<head></head>中

    JavaScript写在Html页面的<head></head>中 ----------------- <html> <head> <style ...

  2. 有一字符串，包含n个字符。写一函数，将此字符串中从第m个字符开始的全部字符复制成为另一个字符串。

    [提交][状态][讨论版] 题目描述 有一字符串,包含n个字符.写一函数,将此字符串中从第m个字符开始的全部字符复制成为另一个字符串. 输入 数字n 一行字符串 数字m 输出 从m开始的子串 样例输入 ...

  3. Markdown: 用写代码的思维写文档

    作者:吴香伟 发表于 2014/08/07 版权声明:可以任意转载,转载时务必以超链接形式标明文章原始出处和作者信息以及版权声明 本文不讲解Markdown的语法规则,只关注它带来的好处以及我使用的方 ...

  4. struts2 action配置时 method 省略不写 默认执行方法是父类ActionSuppot中的execute()方法

    struts2 action配置时 method 省略不写 默认执行方法是父类ActionSuppot中的execute()方法

  5. 面试题-->写一个函数，返回一个数组中所有元素被第一个元素除的结果

    package com.rui.test; import java.util.Random; /** * @author poseidon * @version 1.0 * @date:2015年10 ...

  6. IntelliJ下使用Code/Live Template加快编码速度：程序员的工作不是写程序，而是写程序解决问题

    程序员的工作不是写程序,而是写程序解决问题. --- 某不知名程序员 我们每天都在写代码,有些代码有结构性的相似,但不是所有的代码都可以被抽成方法.在这种情况下,我们应该考虑使用template的方式 ...

  7. 会写网页 就会写手机APP -- Hybrid Mobile Apps for ASP.NET Developers

    您好,这篇文章是我的BLOG发出,原始出处在此: 会写网页 就会写手机APP -- Hybrid Mobile Apps for ASP.NET Developers http://www.dotbl ...

  8. ios属性和成员变量写在.h文件和.m文件中 区别？

    1  其实是一样的.在.m文件上只能.m文件内部的才能访问的这个变量,如果在.h文件中,其他的文件也可以访问到这个变量. 2  写.h文件里边可以和其他的类进行交互,写.m里边只是在本类中使用! 3 ...

  9. hql中不能写count(1)能够写count(a.id)

    hql中不能写count(1)能够写count(a.id)里面写详细的属性 String hql="select new com.haiyisoft.vo.entity.cc.repo.Bu ...

  10. vue 使用Jade模板写html，stylus写css

    vue 使用Jade模板写html,stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的 ...

随机推荐

  1. 我的web课堂作业

    001 my first page <%@ page language="java" contentType="text/html; charset=UTF-8&q ...

  2. Java实现 LeetCode 779 第K个语法符号（递归）

    779. 第K个语法符号 在第一行我们写上一个 0.接下来的每一行,将前一行中的0替换为01,1替换为10. 给定行数 N 和序数 K,返回第 N 行中第 K个字符.(K从1开始) 例子: 输入: N ...

  3. Java实现 LeetCode 714 买卖股票的最佳时机含手续费（动态规划 || 迭代法）

    714. 买卖股票的最佳时机含手续费 给定一个整数数组 prices,其中第 i 个元素代表了第 i 天的股票价格 :非负整数 fee 代表了交易股票的手续费用. 你可以无限次地完成交易,但是你每次交 ...

  4. Java实现 LeetCode 343 整数拆分（动态规划入门经典）

    343. 整数拆分 给定一个正整数 n,将其拆分为至少两个正整数的和,并使这些整数的乘积最大化. 返回你可以获得的最大乘积. 示例 1: 输入: 2 输出: 1 解释: 2 = 1 + 1, 1 × ...

  5. java实现黄金分割数

    黄金分割数 0.618 与美学有重要的关系.舞台上报幕员所站的位置大约就是舞台宽度的 0.618 处, 墙上的画像一般也挂在房间高度的 0.618 处,甚至股票的波动据说也能找到 0.618 的影子- ...

  6. Java实现夺冠概率模拟

    足球比赛具有一定程度的偶然性,弱队也有战胜强队的可能. 假设有甲.乙.丙.丁四个球队.根据他们过去比赛的成绩,得出每个队与另一个队对阵时取胜的概率表: 甲 乙 丙 丁 甲 - 0.1 0.3 0.5 ...

  7. java实现第五届蓝桥杯猜年龄

    猜年龄 题目描述 小明带两个妹妹参加元宵灯会.别人问她们多大了,她们调皮地说:"我们俩的年龄之积是年龄之和的6倍".小明又补充说:"她们可不是双胞胎,年龄差肯定也不超过8 ...

  8. CSS清除浮动&内容居中&文字溢出

    学习! 1.CSS清除浮动的方法 (1)添加标签清除浮动: 在浮动元素结尾处,并列的添加标签<div style="clear:both;"></div>. ...

  9. 【优雅写代码系统】springboot+mybatis+pagehelper+mybatisplus+druid教你如何优雅写代码

    目录 spring基本搭建 整合mybatis pom配置 mybatis配置 设置数据源 设置sqlsessionfactory 设置扫描 设置开启事务 资源放行 测试 结果 思考&& ...

  10. 一网打尽枚举操作 .net core

    本文介绍如何使用枚举以及,如何将枚举类型更好的应用于项目中,看完本文可以有序的将项目中的枚举更容易的使用到每个角落. 1,分析枚举 /// <summary> /// 性别 /// < ...