刚学JavaScript的时候，即使照着书上的代码敲一遍，运行的时候，得到的结果要么总是和书上的结果不同，要么是没产生效果。学到后面，才明白到其实程序的代码是没错的，错误的是代码的位置！

首先看下面这段代码:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script>

		document.getElementById("test").innerHTML="abcdefg";

	</script>

</head>

<body>

	<p id="test"></p>

</body>

</html>

　　这段代码中的js想要强行的通过给innerHTML赋值来改变id为test的p标签的内容，但是，运行的结果是一片空白。F12控制台中提示如下错误：Uncaught TypeError: Cannot set property 'innerHTML' of null

提示信息的意思就是通过id来获取节点失败，没有获取到节点，所以document.getElementById()的结果为null，而null肯定是没有innerHTML这一个属性的，于是错误就发生了。

现在，如果js代码的位置往后调一点，调多少呢？ 其实只要调整到p标签的后面任意位置，就能顺利运行，得到预期的结果。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<p id="test"></p>

</body>

	<script>

		document.getElementById("test").innerHTML="sdfghjk";

	</script>

</html>

　　

虽然这只是一个特别简单的例子，只是改变innerHTML的内容，但是往复杂了说，在要操作的节点之前，定义对节点操作，一般都是会失败的。

这是因为浏览器执行脚本的顺序是从上到下的（从前往后）执行，并不是等整个脚本都加载完毕之后才开始执行。

所以处在前面的代码会比处在后面的代码先执行，如果前面的代码要用到后面的代码的内容，那么这时就会出错。而后面的代码要用到前面的代码，就不会出错。

所以，建议将js代码放置与body标签之后;

这样有两个好处，首先，如果引入的js文件较大，则在下载js文件的过程当中，用户的浏览器界面是一片空白，只有当js文件下载完毕之后，才会显示内容，这样会影响用户体验。如果将js代码放置在后面，则会在一定程度上解决这个问题。

另外一个好处就是上面说的，解决代码运行错误的问题。

JavaScript代码-----位置决定结果的更多相关文章

  1. javascript代码放置位置对程序的影响

    在编写html文档时,javascript可以放置的位置有两个地方<head>或者<body>,但是放置的地方,会对 JavaScript 代码的正常执行会有一定影响.由于 H ...

  2. css和javascript代码写在页面中的位置说明

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JavaScript代码存放位置

    JavaScript代码存放位置 HTML的head中 HTML的body代码块底部(推荐) 由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置 ...

  4. 分析JavaScript代码应该放在HTML代码哪个位置比较好

    本文总结了多种放置JS代码的方法,需要的朋友可以参考下 在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代 ...

  5. JavaScript代码放在HTML代码不同位置的差别

    通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一 ...

  6. javascript代码 调试方法

    你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现. 通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置. 在程序代码中寻找错误叫做代 ...

  7. JavaScript代码段整理笔记系列（二）

    上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey ...

  8. FineUI（专业版）实现百变通知框（无JavaScript代码）！

    博客园已经越来越不公正了,居然说我这篇文章没有实质的内容!! 我其实真的想问哪些通篇几十个字,没任何代码和技术分享,嚷嚷着送书的文章的就能雄霸博客园首页几天,我这篇文章偏偏就为管理员所容不下. 其实我 ...

  9. javaScript代码执行顺序

    javaScript是一种描述型脚本语言,由浏览器进行动态的解析和执行. 页面加载过程中,浏览器会对页面上载入的每个js代码块进行扫描. JavaScript是一段一段的分析执行的,在分析执行同一段代 ...

随机推荐

  1. Redis后台监控与管理CacheCloud

    CacheCloud环境需求 Java 7 Maven 3 MySQL Redis 3 具体用法可参考:https://cachecloud.github.io 1.下载CacheCloud 官网ht ...

  2. HDU2966 In case of failure（浅谈k-d tree）

    嘟嘟嘟 题意:给定\(n\)个二维平面上的点\((x_i, y_i)\),求离每一个点最近的点得距离的平方.(\(n \leqslant 1e5\)) 这就是k-d tree入门题了. k-d tre ...

  3. （二 -2） 天猫精灵接入Home Assistant-自动发现Mqtt设备

    参考中文教程:  https://www.hachina.io/docs/7230.html 英文官网 两个温度传感器:https://www.home-assistant.io/docs/mqtt/ ...

  4. firewalld

    1.查看firewalld防火墙自带的区域名 [root@web ~]# firewall-cmd --get-zones block dmz drop external home internal ...

  5. mysql数据类型介绍(含text,longtext,mediumtext说明)

    转自http://m.blog.csdn.net/sipsir/article/details/12343581 转载,文章原连接已经失效,百度快照找到的. MySQL支持大量的列类型,它可以被分为3 ...

  6. PAT A1141 PAT Ranking of Institutions （25 分）——排序，结构体初始化

    After each PAT, the PAT Center will announce the ranking of institutions based on their students' pe ...

  7. python 数据结构 - 栈

    如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10293388.html 欢迎关注小婷儿的博客: 有问题请在博客下留言或加作者微信:t ...

  8. 软概（lesson 2）：课堂测试

    一.测试题目 二.完成过程 1.设计思想 ①连接mysql数据库 ②设计user类,增加参数 ③设计add类,向数据库内增加内容 ④设计addInput页面,完成录入操作 ⑤设计add页面,接收录入的 ...

  9. 学习CSS布局 - max-width

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. GIT 管理修改、删除文件

    管理修改 现在,假定你已经完全掌握了暂存区的概念.下面,我们要讨论的就是,为什么Git比其他版本控制系统设计得优秀,因为Git跟踪并管理的是修改,而非文件. 你会问,什么是修改?比如你新增了一行,这就 ...