刚学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. sysctl命令

    sysctl命令作用: 被用于在内核运行时动态地修改内核的运行参数,可用的内核参数在目录/proc/sys中,它包含一些TCP/ip堆栈和虚拟内存系统的高级选项,用sysctl可以读取设置超过五百个系 ...

  2. MySQL备份及数据恢复

    昨天MySQL意外挂了,重启不成功.然后悲剧的发现,之前做的磁盘快照规则也不知怎么没有生效,数据无备份. 后来咨询.搜索,结果: 1.可以配置两个参数,忽略检查,启动,可以读数据.然后导出,删除文件库 ...

  3. Ubuntu 14.04服务器配置 （1） 安装和配置

    http://jingyan.baidu.com/article/9c69d48fb9fd7b13c8024e6b.html ssh是一种安全协议,主要用于给远程登录会话数据进行加密,保证数据传输的安 ...

  4. CentOS6.9 安装Oracle 11G 版本11.2.0.1.0

    安装实例与数据库 CentOS6.9 安装Oracle 11G 版本11.2.0.1.0 一.检查系统类别. 查看 系统的类别,这里是 64位系统:[root@localhost ~]# uname ...

  5. ASP.NET quartz 定时任务

    1.下载 2.使用例子 Demo 概述:Quartz 是开源的定时任务工具类,默认每隔10秒执行一次任务,相当于C#的Timer,不断的循环执行(Start 方法),也可以随时停止(ShutDown方 ...

  6. 《Google软件测试之道》简介

    <Google软件测试之道>,一直听朋友讲起这本书,出于琐事太多,一直没机会拜读,最近部门架构觉得我们IT部门的技术太low,就给我们挑选了一些书籍,让我们多看看... 个人的一种学习习惯 ...

  7. Linux下ftp安装配置及三种用户的验证

    一.原理简介 二.安装配置 三.三种用户的验证 一.简介 FTP即文件传输协议(File Transfer Protocol),完成各主机的文件共享功能,基于客户端-服务器的协议,工作在应用层,tcp ...

  8. java语言基础1问题汇总

    1.一个Java类文件中真的只能有一个公有类吗? 程序实验: public class test1 { public static void main( String args[] ){ } publ ...

  9. 配置进程外的Session

    1.Session保存在SQLServer中配置方法 1)运行.NetFramework安装目录下对应版本的aspnet_regsql.exe 来创建相关的数据库.表和存储过程等,比如: C:\Win ...

  10. vba报表制作

    Option Explicit Dim sql, tj As String, rnum As Double, r As Integer  Private Sub CommandButton1_Clic ...