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代码放置在后面，则会在一定程度上解决这个问题。

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

 

posted @ 2017-11-29 10:44  寻觅beyond  阅读(186)  评论(0)  编辑  收藏  举报
返回顶部