今天看js高級編程form表單這一章，看著書上的例子敲代碼的時候出現了一點問題，什麼問題先不說，先看這段代碼？ 代碼就是上面這個樣子的，很簡單的一個表單裡面有一組radio標簽，要實現的效果也就是通過表單拿到這一組radio標簽，但是我按照上面的寫法打出來之後控制台卻一直報錯，錯誤信息如下： 意思就
今天看js高級編程form表單這一章，看著書上的例子敲代碼的時候出現了一點問題，什麼問題先不說，先看這段代碼？
<!DOCTYPE html> <html> <head> <title>Form Fields Example</title> <script type="text/javascript"> var form = document.getElementById("myForm"); console.log(form.elements['color'].length); </script> </head> <body> <form method="post" id="myForm"> <ul> <li><input type="radio" name="color" value="red">Red</li> <li><input type="radio" name="color" value="green">Green</li> <li><input type="radio" name="color" value="blue">Blue</li> </ul> </form> </body> </html>View Code
代碼就是上面這個樣子的，很簡單的一個表單裡面有一組radio標簽，要實現的效果也就是通過表單拿到這一組radio標簽，但是我按照上面的寫法打出來之後控制台卻一直報錯，錯誤信息如下：
意思就是無法讀取null的elements屬性，開始我還以為是我代碼寫錯了，但是仔細檢查之後發現也沒錯，甚至我還以為是form表單沒有寫action屬性這些造成的，但是一一嘗試之後發現還是一直在報相同的錯誤，沒辦法了之後去找這本書的示例代碼，示例代碼如下所示：
<!DOCTYPE html> <html> <head> <title>Form Fields Example</title> </head> <body> <form method="post" id="myForm"> <ul> <li><input type="radio" name="color" value="red">Red</li> <li><input type="radio" name="color" value="green">Green</li> <li><input type="radio" name="color" value="blue">Blue</li> </ul> </form> <script type="text/javascript"> var form = document.getElementById("myForm"); console.log(form.elements['color'].length); </script> </body> </html>View Code
拿到示例代碼之後發現運行完成正確，沒有任何錯誤，當時我就比較鬱悶了，兩個代碼幾乎是完全一樣，唯一不一樣的就是<script>標簽的位置不一樣，我按照慣例把<script>標簽寫在了<head>標簽中，示例中是把<script>標簽放在了<body>中，然後我就把我的代碼也放在<body>中，然後就沒有繼續出錯了，我就感覺很奇怪，因為我記得<script>標簽是可以放在頁面上的任何位置的，但是為什麼放在不同的地方就不一樣了呢？為了驗證我的猜想，我做了一下幾個實驗：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
console.log(111); //111
var colors1 = document.getElementsByName("color");
console.log('--------1----------'+colors1.length);//--------1----------0
var form1 = document.getElementById("myForm");
console.log('-----1-------------'+form1);//-----1-------------null
var sizeRadio1 = document.getElementsByName("size");
console.log('-----size1------'+sizeRadio1.length);//-----size1------0
</script>
</head>
<body>
<ul>
<li>
<input type="radio" name="size" value="1" />
<input type="radio" name="size" value="2" />
<input type="radio" name="size" value="3" />
<input type="radio" name="size" value="4" />
</li>
</ul>
<form method="post" id="myForm">
<ul>
<li><input type="radio" name="color" value="red">Red</li>
<li><input type="radio" name="color" value="green">Green</li>
<li><input type="radio" name="color" value="blue">Blue</li>
</ul>
</form>
</body>
<script>
console.log(222);
var colors2 = document.getElementsByName("color");
console.log('-------2----------'+colors2.length);//-------2----------3
var form2 = document.getElementById("myForm");
console.log('------------form2----------------------'+form2.elements.length);//------------form2----------------------3
var sizeRadio2 = document.getElementsByName("size");
console.log('-----size2------'+sizeRadio2.length);//-----size2------4
</script>
</html>
通過上面的代碼，我發現了這麼個情況，只要是沒有操作<body>中標簽的script代碼放在那裡都無所謂，只不過是載入順序不一樣罷了，就行列印111和列印222一樣，先列印出來了在head中的111，然後才列印出來了再body中的222，但是在需要操作body中的元素時，在head標簽中的script代碼就會出問題，就是找不到需要操作的元素，經過我的實驗之後我得出的一個結論是：如果需要在script中操作body中的元素，那麼必須在要操作的元素載入完成之後才可以，也就是說要把操作元素的js代碼放在元素之後。
後來我在網上查了一下html頁面上關於js以及標簽的載入順序，跟我的猜想是一樣的，html是從上到下進行載入的，遇到使用連接方式載入的js或者css就發送request請求載入，如果是直接寫的代碼，那麼就直接初始化，如果是函數那麼就直接初始化，在觸發時直接執行函數，如果在head中操作body中的元素，那麼就會出現找不到的情況，因為此時body中的元素還沒有載入完成。
我的理解暫時就是這個樣子了，如果有說的不對的地方歡迎大家指正。
