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.οnlοad=function(){ var dom1 = document.getElementById("box");//方法1:通過id；var dom2 = document.getElementsByName("box");//方法2:通過TagNamevar 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>?
?
?
好吧，時間不早了，該休息了。今天就寫這么多吧。大家晚安。
?
轉載于:https://www.cnblogs.com/yugege/p/4136265.html
總結
以上是生活随笔為你收集整理的javaScript初学者易错点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 常识：佛前三炷香是什么意思
- 下一篇： if the parser found