咱先说将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. Java实现 LeetCode 528 按权重随机选择（TreeMap）

    528. 按权重随机选择 给定一个正整数数组 w ,其中 w[i] 代表位置 i 的权重,请写一个函数 pickIndex ,它可以随机地获取位置 i,选取位置 i 的概率与 w[i] 成正比. 说明 ...

  2. java实现棋盘上的麦子

    ** 棋盘上的麦子** 你一定听说过这个故事.国王对发明国际象棋的大臣很佩服,问他要什么报酬,大臣说:请在第1个棋盘格放1粒麦子,在第2个棋盘格放2粒麦子,在第3个棋盘格放4粒麦子,在第4个棋盘格放8 ...

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

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

  4. opencl(2)平台、设备、上下文的获取与信息获取

    1:平台 1)获取平台id cl_int clGetPlatformIDs( cl_uint num_entries,      //想要获取的平台数 cl_platform_id * flatfor ...

  5. Linux文件系统--基于EXT2

    一.文件系统基本知识 ① 存储在永久性存储介质,由程序按照某种格式制作的数据集合叫做文件 ② 磁盘上管理文件的文件.数据结构和操作构成磁盘文件系统,简称文件系统 ③ 文件属性 (1)名称 (2)位置 ...

  6. 根据现有Bitmap生成相同图案指定大小的新Bitmap

    通过一张现有的Bitmap,画出一张同样的但是大小使我们指定的Bitmap 需求:直接createBitmap的话不允许生成的bitmap的宽高大于原始的,因此需要特定方法来将一张Bitmap的大小进 ...

  7. js中有遍历作用相关的方法详解总结

    题外话 os:个人笔记: 大概接触过map, foreach, for, filter, findIn, includes等等 字符串检索 .indexOf() 返回某个指定字符串值在字符串中首次出现 ...

  8. 3.vue计算属性

    1.计算属性  再vue中如果出现表达式过长或者逻辑比较复杂,这时会导致代码不清晰,臃肿,难以维护所以我们会使用计算属性进行书写  再计算属性中可以放负责的逻辑,可以是函数,表达式等,但最终会返回一个 ...

  9. [Web][学习随笔]Session&cookie

    Session 从登录建立连接到退出就是一次会话.Session数据就会在会话期间用户存在服务器端的数据.这样,当用户在Web页之间跳转时,存储在Session对象中的变量将不会丢失,而是在整个用户会 ...

  10. 存储过程WHERE条件不生效

    业务上有个删除操作需要涉及到几张表,一条一条操作很麻烦,所以想写个存储过程来封装下,原始语句如下: DELETE FROM AUTH_AUTHORITY WHERE `ID` in ('f_view_ ...