javaScript初學者易錯點

時間 2019-11-12

原文原文鏈接

你們好，這是我在博客園寫的第一篇博文。做爲一名前端開發初學者，因爲經驗不足，水平有限，在作項目的過程當中總會遇到這樣或那樣的問題，往往這時候，我都比較喜歡到博客園這裏來尋求解決方案，結果也老是能找到滿意的答案。人不只要懂得獲取，還應該懂得付出。所以，我今天在這裏註冊了一個帳號，之後把本身在學習過程當中積累的點點滴滴和你們一塊兒分享一下下，還說不定也許對於那些比我晚學前端的親們有一點點的幫助呢。個人目的很簡單，那就是但願在這個平臺裏和你們一塊兒學習，共同進步。其餘的我就很少說了，如今直接切入正題吧，就是簡單談談我在學習javaScript過程當中比較喜歡犯下的一些錯誤兒，以讓你們借鑑一下，省得在這些地方再次被坑。javascript

首先，我要跟你們說說html和javascript代碼的執行順序吧。其實呢，代碼的執行順序是自上而下的。什麼是自上而下的執行順序呢？咱們一塊兒來看看下面這段代碼吧，你就會知道什麼是「自上而下」了！！html

 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 java

爲何會報「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屬性來獲取。可是第一種方法獲得的值和第2、三種是不一樣，第一種獲得的是一個對象，第2、三種獲得的是一個對象數組。好比，有下面的段代碼：app

<div id="box" name="box" > hello world! </div>

咱們想要獲取它的dom對象，如今分別用三種方法來試一下吧：dom

 <script>
    window.onload=function(){
     var dom1 = document.getElementById("box");//方法1:經過id；
     var dom2 = document.getElementsByName("box");//方法2:經過TagName
     var dom3 = document.getElementsByTagName("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";

dom3.style.background = "blue";

就錯誤了。咱們剛剛已經alert過了，dom2和dom3是一個對象數組，而不是簡單的一個對象。咱們要指定某個對象，還要加個下標給它，只需把上面改爲

dom2[0].style.background = "blue";

dom3[0].style.background = "blue";

這樣就正確了。

最後，咱們須要記住的是：內嵌的JavaScript代碼片斷的任何位置都不能夠出現</script>，包括註釋裏的和字符串裏面，以下都是會報錯的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index1</title>
    <script> 
        alert("</script>");
    </script>
</head>
<body>
</body>
</html>

或者：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index1</title>
    <script> 
        //這裏是</script>代碼
        alert("Hello World");
    </script>
</head>
<body>
</body>
</html>