咱先说将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. docker重启提示已存在一个容器的问题处理

    一.问题:在vmware虚拟机中测试以docker方式安装的prometheus,当重启虚拟机后,再次运行prometheus的执行文件,提示已有名称为prometheus的容器存在. 二.处理过程 ...

  2. ASP.NET Core 3.x API版本控制

    前言 一般来说需要更改我们API的时候才考虑版本控制,但是我觉得我们不应该等到那时候来实现它,我们应该有一个版本策略从我们应用程序开发时就开始制定好我们的策略,我们一直遵循着这个策略进行开发. 我们其 ...

  3. Verilog - ABS代码重构

    https://mp.weixin.qq.com/s/-KUviTzO3Hdir_mI57L24g 从形式和语义两个层面,来扣一下ABS这段代码. 目的在于:在不降低通用性.不增加复杂度的情况下,提升 ...

  4. 带你学够浪：Go语言基础系列-环境配置和 Hello world

    文章每周持续更新,原创不易,「三连」让更多人看到是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 前面几周陆陆续续写了一些后端技术的文章,包括数据库.微 ...

  5. Java实现 LeetCode 813 最大平均值和的分组 （DFS+DP记忆化搜索）

    813. 最大平均值和的分组 我们将给定的数组 A 分成 K 个相邻的非空子数组 ,我们的分数由每个子数组内的平均值的总和构成.计算我们所能得到的最大分数是多少. 注意我们必须使用 A 数组中的每一个 ...

  6. Java 第十一届 蓝桥杯 省模拟赛 户户通电（图算法）

    户户通电 题目 问题描述 2015年,全中国实现了户户通电.作为一名电力建设者,小明正在帮助一带一路上的国家通电. 这一次,小明要帮助 n 个村庄通电,其中 1 号村庄正好可以建立一个发电站,所发的电 ...

  7. 如何获取CSDN的积分?

    个人感觉就是写博客就给积分 具体给多少? CSDN应该有自己的积分规则 总之一句话:写博客涨积分

  8. Java实现 蓝桥杯VIP 算法训练 数的统计

    问题描述 在一个有限的正整数序列中,有些数会多次重复出现在这个序列中. 如序列:3,1,2,1,5,1,2.其中1就出现3次,2出现2次,3出现1 次,5出现1次. 你的任务是对于给定的正整数序列,从 ...

  9. Java实现 LeetCode 284 顶端迭代器

    284. 顶端迭代器 给定一个迭代器类的接口,接口包含两个方法: next() 和 hasNext().设计并实现一个支持 peek() 操作的顶端迭代器 – 其本质就是把原本应由 next() 方法 ...

  10. Java实现 蓝桥杯 算法提高 双十一抢购

    试题 算法提高 双十一抢购 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 一年一度的双十一又来了,某网购网站又开始了半价销售的活动. 小G打算在今年的双十一里尽情地购物,以享受购买 ...