刚学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. 面试被问http协议？这篇文章足够覆盖所有相关问题！

    http使用面向连接的TCP作为传输层协议.http本身无连接. 请求报文 CRLF是回车换行     方法为GET的请求报文     方法为POST的请求报文     方法 OPTIONS:这个方法 ...

  2. ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: NO) ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: YES)

    windows下,以上两个错误的解决方法 工具/原料   windows 8 MySql 方法/步骤     找到配置文件my.ini  ,然后将其打开,可以选择用记事本打开   打开后,搜索mysq ...

  3. 使用ElasticSearch服务从MySQL同步数据实现搜索即时提示与全文搜索功能

    最近用了几天时间为公司项目集成了全文搜索引擎,项目初步目标是用于搜索框的即时提示.数据需要从MySQL中同步过来,因为数据不小,因此需要考虑初次同步后进行持续的增量同步.这里用到的开源服务就是Elas ...

  4. zabbix_agent安装

    #!/bin/bash#by Charon2Pluto#(linux)ML=`df |awk '{print $2,$NF}'|sort -n|tail -1|awk '{print $2}'` if ...

  5. ORACLE 11gR2 RAC添加删除（正常及强制）节点操作步骤（删除篇）

    ORACLE 11gR2 RAC添加删除(正常及强制)节点操作步骤(删除篇) 本文主要转载 [  http://www.cnxdug.org/?p=2511 ] 有部分细节自己实验添加,再此谢谢前辈. ...

  6. spring-batch批处理框架

    转自 http://www.cnblogs.com/gulvzhe/archive/2011/10/21/2220260.html 这个框架没有实际操作,只是从同事处学习到,先转个好文章,以后有机会再 ...

  7. hibernate validator 动态返回国际化提示

    一.说明 以下方法实现了读取指定国际化文件的校验器. 1. MyMessages是自定义的国际化文件,放置在src的根目录下 例如有MyMessages_en_US.properties.MyMess ...

  8. Android学习之基础知识八—Android广播机制实践（实现强制下线功能）

    强制下线功能算是比较常见的了,很多的应用程序都具备这个功能,比如你的QQ号在别处登录了,就会将你强制挤下线.实现强制下线功能的思路比较简单,只需要在界面上弹出一个对话框,让用户无法进行任何操作,必须要 ...

  9. 『转』统计一个日志文件里，单词出现频率的shell脚本

    原文地址:http://blog.csdn.net/taiyang1987912/article/details/39995175 #查找文本中n个出现频率最高的单词 #!/bin/bash coun ...

  10. 如何写好一篇高质量的IEEE/ACM Transaction级别的计算机科学论文?

    转自<知乎>如何写好一篇高质量的IEEE/ACM Transaction级别的计算机科学论文? 问题: 作为一个博士生,一直为写论文头疼,读过很多高质量论文,觉得写的真好,但是轮到自己写总 ...