咱先说将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. Rocket - tilelink - toBools

    https://mp.weixin.qq.com/s/UGMH8EoaVcFkkQW-l4HLWg   分析toBools在Intellij中显示为红色的问题.   ​​   1. 问题   在TLA ...

  2. Redis 入门到分布式 （六）常见的持久化开发运维问题

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.常见问题目录 fork操作 进程外开销 AOF追加阻塞 单机多实例部署 二. fork 1.Fork ...

  3. Java实现 LeetCode 448 找到所有数组中消失的数字

    448. 找到所有数组中消失的数字 给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间 ...

  4. Java实现 LeetCode 442 数组中重复的数据

    442. 数组中重复的数据 给定一个整数数组 a,其中1 ≤ a[i] ≤ n (n为数组长度), 其中有些元素出现两次而其他元素出现一次. 找到所有出现两次的元素. 你可以不用到任何额外空间并在O( ...

  5. Java实现 蓝桥杯VIP 算法提高 理财计划

    算法提高 理财计划 时间限制:1.0s 内存限制:256.0MB 问题描述 银行近期推出了一款新的理财计划"重复计息储蓄".储户只需在每个月月初存入固定金额的现金,银行就会在每个月 ...

  6. Java实现 LeetCode 94 二叉树的中序遍历

    94. 二叉树的中序遍历 给定一个二叉树,返回它的中序 遍历. 示例: 输入: [1,null,2,3] 1 2 / 3 输出: [1,3,2] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? / ...

  7. Java实现 LeetCode 50 Pow（x,n）

    50. Pow(x, n) 实现 pow(x, n) ,即计算 x 的 n 次幂函数. 示例 1: 输入: 2.00000, 10 输出: 1024.00000 示例 2: 输入: 2.10000, ...

  8. Java实现找零问题

    1 问题描述 现需找零金额为n,则最少需要用多少面值为d1 < d2 < d3 < - < dm的硬币?(PS:假设这m种面值d1 < d2 < d3 < - ...

  9. java实现 洛谷 P1017 进制转换

    import java.util.Scanner; public class Main { private static Scanner cin; public static void main(St ...

  10. java实现第八届蓝桥杯生命游戏

    生命游戏 题目描述 康威生命游戏是英国数学家约翰·何顿·康威在1970年发明的细胞自动机. 这个游戏在一个无限大的2D网格上进行. 初始时,每个小方格中居住着一个活着或死了的细胞. 下一时刻每个细胞的 ...