咱先说将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. MyBatis（二）参数传递和自定义结果集

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.myBatis的注解使用方式 package com.webcode.mapper; import ...

  2. Java实现 蓝桥杯 算法提高 矩阵乘法（暴力）

    试题 算法提高 矩阵乘法 问题描述 小明最近刚刚学习了矩阵乘法,但是他计算的速度太慢,于是他希望你能帮他写一个矩阵乘法的运算器. 输入格式 输入的第一行包含三个正整数N,M,K,表示一个NM的矩阵乘以 ...

  3. Java实现 蓝桥杯 算法训练 求平方和

    试题 算法训练 求平方和 问题描述 请用函数重载实现整型和浮点习型的两个数的平方和计算 输入格式 测试数据的输入一定会满足的格式. 2 2(2行2列,第1行整型,第2行浮点型) 输出格式 要求用户的输 ...

  4. Java实现 LeetCode 318 最大单词长度乘积

    318. 最大单词长度乘积 给定一个字符串数组 words,找到 length(word[i]) * length(word[j]) 的最大值,并且这两个单词不含有公共字母.你可以认为每个单词只包含小 ...

  5. Java实现 洛谷 P1909 买铅笔

    import java.util.Arrays; import java.util.Scanner; public class Main { public static void main(Strin ...

  6. java实现南北朝时

    南北朝时,我国数学家祖冲之首先把圆周率值计算到小数点后六位,比欧洲早了 1100 年! 他采用的是称为"割圆法"的算法,实际上已经蕴含着现代微积分的思想. 如图[1.jpg]所示, ...

  7. 运用Navicat for MySQL进行MSSQL数据转移MYSQL

    当前不同数据库进行数据转移已经不是一件麻烦事情,特别是有很多很方便的工具,而最近我在搜集各种数据时候,也需要进行大量的数据转移,并且数据库和所转移的数据库表都不同,这次给大家介绍个最简单的方法,就是使 ...

  8. FPGA之SPI SD卡读操作

    这几天在FPGA调试与SD通信,读SD卡里的图片,之前接触32时没有去研究过SD卡,不太熟悉操作流程,在网上找了很多资料,也看了几个32开发板的资料,但大多数都讲得不是特别清楚,只能瞎操作了一番,在别 ...

  9. 权限系统设计(0):权限系统设计基本概念改需-MAC/RBAC引子

    此篇主要对权限系统设计所涉的一些专业术语重点梳理.从我们windows的文件系统 自主访问控制 到基于角色访问控制. 权限设计基本术语 对后面会用到的词汇做一个简要说明 什么是权限(许可) 权限(Pr ...

  10. 【JAVA进阶架构师指南】之五：JVM性能调优

    前言   首先给大家说声对不起,最近属实太忙了,白天上班,晚上加班,回家还要收拾家里,基本每天做完所有事儿都是凌晨一两点了,没有精力再搞其他的了.   好了,进入正题,让我们来聊聊JVM篇最后一个章节 ...