javascript 入門 (3)getElementByName, getElementById等用法

getElementByName不存在
只有getElement__S__ByName 和 getElementById

byId的時候，會根據html元素的id屬性，根據規范id應當是唯一的，用來標示一個element，比如<td>, <div> ......。所以返回唯一元素句柄或者null。對於表單控件<input><select><textarea>等，在不指定id的時候，name也會被視作id，比如<input type="text" name="abc" value="123">也可以用document.getElementByIdx("abc")來獲取

而byName，從名字上看，就可以知道，它返回的是復數個對象。它根據name屬性（name可以重復），得到所有name屬性與參數相同的控件組成的數組，不存在時，返回0長度數組(.length == 0,而不是null)
比如
<input type="text" name="abc" value="1">
<input type="text" name="abc" value="2">
<input type="text" name="abc" value="3">

var array = document.getElementsByName("abc");
if (array.length == 0) {
alert("Error");
return;
}

for (var i = 0; i < array.length; i++) {
alert(array[i].value);
}

 

 

當頁面上的控件同名且多個的時候 , 你首先做的是什么 ? 判斷長度 ? 的確 , 從程序的嚴密角度出發 , 我們是需要判斷長度 , 而且有長度和沒長度是兩種引用方法 . 我們來看 :
oEle= document.all.aaa ;// 這里有一個 aaa 的對象 , 但我們不知道它現在長度是多少 , 所以沒辦法對它操作 . 因此 , 我們要先做判斷長度的過程 . 如下 :
if(oEle.length){}else{};
在兩種情況下 , 花括號里面的內容寫法也是不一樣的 :
if(oEle.length){
   for(var i = 0 ;i<oEle.length;i++){
      oEle[i].value........
  }
}
else{
     oEle.value........
};

但是這樣寫是不是太復雜了點 ? 而且當花括號里面的代碼比較多的時候 , 我們要寫兩遍代碼 , 暈了先 ~
還好有 document.getElementsByName() 這個方法 . 它對一個和多個的處理是一樣的 , 我們可以用 :
oEle = document.getElementsByName('aaa') 來引用
當 oEle 只有 1 個的時候 , 那么就是 oEle[0], 有多個的時候 , 用下標法 oEle[i] 循環獲取 , 是不是很簡單 ?

值得一提的是它對 Name 和 ID 的同樣有效的 .
但是它只能應用到 document 對象 . 相對應的 , 還有另一個方法 , 可以應用的對象會更廣一點 :
getElementsByTagName, 比如我知道了一個 <DIV ID='aaa'><input/><input/>......</DIV>
我要取 DIV 里面的所有 input, 這樣寫就可以了 :aaa.getElementsByTagName_r('INPUT'), 這樣就有效的可以和別的 DIV( 比如說有個叫 bbb 的 DIV, 里面的也是一樣的 input) 相區別 .
同 getElementsByTagName 相對應 , 還有一個 document.body.all.tags(), 能用這個方法的對象比 getElementsByTagName 要小得多 . 但比 getElementsByName 要多 .
到這里我們還要提一下 getElementById, 它也是只有 document 對象才能使用 , 而且返回的是數組的第一個元素 , 呵呵 , 它的方法名都寫明了是 getElement 而不是 getElements, 所以 , 千萬不要搞渾了 .