首页 > 代码库 > javaScript初学者易错点
javaScript初学者易错点
大家好，这是我在博客园写的第一篇博文。作为一名前端开发初学者，由于经验不足，水平有限，在做项目的过程中总会遇到这样或那样的问题，每每这时候，我都比较喜欢到博客园这里来寻求解决方案，结果也总是能找到满意的答案。人不仅要懂得获取，还应该懂得付出。因此，我今天在这里注册了一个账号，以后把自己在学习过程中积累的点点滴滴和大家一起分享一下下，还说不定也许对于那些比我晚学前端的亲们有一点点的帮助呢。我的目的很简单，那就是希望在这个平台里和大家一起学习，共同进步。其他的我就不多说了，现在直接切入正题吧，就是简单谈谈我在学习javaScript过程中比较喜欢犯下的一些错误儿，以让大家借鉴一下，免得在这些地方再次被坑。
首先，我要跟大家说说html和javascript代码的执行顺序吧。其实呢，代码的执行顺序是自上而下的。什么是自上而下的执行顺序呢？也许你会疑惑，好吧，那么，问题就来了，
我们一起来看看下面这段代码吧，你就会知道什么是“自上而下”了！！
1 <html> 2 <head> 3 <meta charset="utf-8"/> 4 <title> 5 demo1 6 </title> 7 <script> 8 var sing = document.getElementById("startSing"); 9 sing.onclick = function(){10 alert("happy birthday to you...happy birthday to you...");11 }12 </script>13 </head>14 <body>15 <input type="button" value="sing" id="startSing"/>16 </body>17 </html>
上面代码的意图是通过点击按钮"sing"，弹出一个"happy birthday to you“的窗口。但是，结果，浏览器却报错了。错误信息如下：
TypeError: sing is null
为什么会报“sing is null ”这样的错误呢，我们明明是通过id来得到startSing这个节点的dom的赋给sing的啊！sing应该是一个object才对的！！怎么会是null呢？其实道理很简单，我们前面不是说了吗？代码是自上而下执行的。当程序执行到第八行的document.getElementById("startSing")时，因为id=startSing的input节点在地15行，但在第八行之前没有id=startSing的节点，所以，得到的结果是一个null。这种错误，在项目实例开发当中是经常会碰到的。为了避开这个错误，我们应该把javascript代码放到onload这个事件函数里面去。把上面的js代码改成如下就行了。
<script> window.onload=function(){ var sing = document.getElementById("startSing"); sing.onclick = function(){ alert("happy birthday to you...happy birthday to you..."); } } </script>
为什么放到onload函数里面就不会报错了呢？这是因为onload事件函数里面的代码是在整个页面加载完成之后才会执行的。也就是说，在执行里面代码时，整个页面都已经解析完了，当然，<input type="button" value="sing" id="startSing"/>这行也已经执行了。所以，就能够成功获取到了它的dom啦。
下面我们再来谈谈另外一个初学者比较容易犯错的地方吧。我们知道，要获取一个节点的dom对象有三种方法，一种同过它的id,还有一种是通过他的标签名（比如：p,div,span,h1等等），最后一种是通过name属性来获取。但是第一种方法得到的值和第二、三种是不同，第一种得到的是一个对象，第二、三种得到的是一个对象数组。比如，有下面的段代码：
<div id="box" name="box" > hello world! </div>
我们想要获取它的dom对象，现在分别用三种方法来试一下吧：
<script>
window.onload=function(){ var dom1 = document.getElementById("box");//方法1:通过id； var dom2 = document.getElementsByTagName("box");//方法2:通过TagName var dom3 = document.getElementsByName("div");//方法3：通过Name alert("dom1是"+dom1+" " + "dom2是"+dom2+" " +"dom3是" + dom3) }
</script> 在火狐浏览器中打开，alert的结果是：dom1是[object HTMLDivElement] dom2是[object HTMLCollection] dom3是[object NodeList]
由此可知，dom1是是一个对象，dom2是一个对象数组，dom3也是一个对象数组。一个是对象，另外两个是对象数组，那么问题就来了，比如，现在要使
<div id="box" name="box" > hello world! </div>的背景色变成蓝色，
dom1.style.background="blue"
这种方法是正确的，结果，hello world!的背景色可以变成蓝色的。但是，以下两种方法
dom2.style.background = "blue";
dom2.style.background = "blue";
就错误了。我们刚刚已经alert过了，dom2和dom3是一个对象数组，而不是简单的一个对象。我们要指定某个对象，还要加个下标给它，只需把上面改成
dom2[0].style.background = "blue";
dom3[0].style.background = "blue";
这样就正确了。
好吧，时间不早了，该休息了。今天就写这么多吧。大家晚安。
javaScript初学者易错点