JavaScript代码-----位置决定结果
刚学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代码-----位置决定结果的更多相关文章
- javascript代码放置位置对程序的影响
在编写html文档时,javascript可以放置的位置有两个地方<head>或者<body>,但是放置的地方,会对 JavaScript 代码的正常执行会有一定影响.由于 H ...
- css和javascript代码写在页面中的位置说明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript代码存放位置
JavaScript代码存放位置 HTML的head中 HTML的body代码块底部(推荐) 由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置 ...
- 分析JavaScript代码应该放在HTML代码哪个位置比较好
本文总结了多种放置JS代码的方法,需要的朋友可以参考下 在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代 ...
- JavaScript代码放在HTML代码不同位置的差别
通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一 ...
- javascript代码 调试方法
你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现. 通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置. 在程序代码中寻找错误叫做代 ...
- JavaScript代码段整理笔记系列（二）
上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey ...
- FineUI（专业版）实现百变通知框（无JavaScript代码）！
博客园已经越来越不公正了,居然说我这篇文章没有实质的内容!! 我其实真的想问哪些通篇几十个字,没任何代码和技术分享,嚷嚷着送书的文章的就能雄霸博客园首页几天,我这篇文章偏偏就为管理员所容不下. 其实我 ...
- javaScript代码执行顺序
javaScript是一种描述型脚本语言,由浏览器进行动态的解析和执行. 页面加载过程中,浏览器会对页面上载入的每个js代码块进行扫描. JavaScript是一段一段的分析执行的,在分析执行同一段代 ...
随机推荐
- 用scrapy爬取亚马逊网站项目
这次爬取亚马逊网站,用到了scrapy,代理池,和中间件: spiders里面: # -*- coding: utf-8 -*- import scrapy from scrapy.http.requ ...
- Android平台调用Web Service：线程返回值
接上文 前文中的遗留问题 对于Java多线程的理解,我曾经只局限于实现Runnable接口或者继承Thread类.然后重写run()方法.最后start()调用就算完事,可是一旦涉及死锁以及对共享资源 ...
- centos7下安装docker（11容器操作总结）
这段时间主要是学习了对容器的操作,包括:容器的状态:start,stop,restart,rename,pause,unpause,rm,attach,exec,kill,logs:还学习了对容器的资 ...
- 普通用户使用docker命令
由于docker 都是root权限启动的容器, 要给研发 登录权限查看log,对于普通用,使用docker是会出现报错, 使用 gpasswd 命令把用户加入到docker组中 gpasswd -a ...
- 椭圆曲线签名算法的v的定义
在之前的个个与签名相关的地方我都对v的定义感到十分困惑,知道查看了黄皮书以后才对它的作用有了一定地了解,如下: (v is the recovery id: a 1 byte value specif ...
- 使用pycharm调用模块后字体变灰
点击小灯泡提示出现以下内容:This inspection detects names that should resolve but don't. Due to dynamic dispatch a ...
- [转]QT4.8.5+qt-vs-addin-1.1.11+VS2010安装配置和QT工程的新建和加载
1.下载windows下的QT库 QT4.8.5 for vs2010: http://download.qt-project.org/official_releases/qt/4.8/4.8.5/q ...
- C#位运算实际运用
前言 前几天写了一篇关于c#位操作,c#位运算基本概念与计算过程 最后提到一个实际问题 需求:C# 用两个short,一个int32拼成一个long型 要求:现在有两个short和一个int,需要拼成 ...
- 简单的策略模式Strategy演示
策略模式,即规则在变化之中,结果终归为一. 公司给员工计算工资,如有加班费,差旅费,每个月的生活补帖等等其它费用需要计算.这个费的规则是不尽相同. 不管策略的规则怎样,终归需要计算出一个结果 工资: ...
- Java 大数、高精度模板
介绍: java中用于操作大数的类主要有两个,一个是BigInteger,代表大整数类用于对大整数进行操作,另一个是BigDecimal,代表高精度类,用于对比较大或精度比较高的浮点型数据进行操作.因 ...