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

來源:互聯網
上載者:User

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,所以,千萬不要搞渾了.

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.