2011-04-14 102 views
1

我的最終目標是獲取單選按鈕列表並檢查/取消選中它們。這裏是我的代碼:getElementsByTagName返回字符串

for (var radio in document.getElementsByTagName('input')) { 
     if(typeof (radio) != "string") 
      alert(radio); 
    } 

alert永遠不會被調用。

對document.getElementsByTagName的調用返回一個從0到列表長度的編號的字符串列表,所以它們的所有屬性(類型,ID等)都是未定義的,我無法真正做到。

我在這裏做錯了什麼?爲什麼這些元素沒有返回對象?

這是在Firefox 4和鉻,如果有幫助。

+1

你是不是想如果'document.getElementsByTagName( '輸入')。radio'定義找? – Kayla 2011-04-14 19:56:59

回答

5

getElementsByTagName返回NodeList對象,這是Array - 在於它原型任意數字索引在其上的感測。

您應該不是使用for..in循環來枚舉通過NodeList

爲什麼?

由於for..in遍歷所有的對象的屬性,這將導致存在於NodeList額外不想要的性質以及所述任意索引原型 到其上(其通過的方式是屬性太。)

由於您正在迭代索引,因此您保證不會獲得除DOMElement對象以外的任何對象。因此,您不需要typeof檢查。

所以,我覺得你的意思是這樣:

var els = document.getElementsByTagName('input'); 
for(var i = 0, j = els.length; i < j; i++) { 
    alert(els[i]); 
} 

或者,你也可以做到這一點,但我不建議這樣做:

var els = document.getElementsByTagName('input'); 
for(var index in els) { 
    if(els.hasOwnProperty(index) && typeof index === 'number') { 
     //we have an element 
     alert(els[index]); 
    } 
} 
+0

'typeof DOMElement'會評估爲'string'嗎? – 2011-04-14 20:04:28

+1

我認爲你的意思是DOM元素的一個'NodeList',與數組有微妙差別 - http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1938918D – 2011-04-14 20:04:41

+0

@Russ Wow ,不敢相信我忘了那件事。更新,謝謝 – 2011-04-14 20:06:43

1

嘗試使用正常的循環。 for(x in obj)循環遍歷對象的屬性,而不是數組的實際元素。

var els = document.getElementsByTagName("input"); 
for (var i=0; i<els.length; i++) { 
    var radio = els[i]; 
    if (typeof(radio) != "string") { 
     alert(radio); 
    } 
} 
+1

這並非完全正確,你可以使用'for ... in'循環遍歷數組元素,但是可能會得到比期望更多的元素(由原型鏈引起)。 – 2011-04-14 20:03:06

+0

順便說一下,'typeof(radio)'(你可以省略小括號)總會像所有'HTMLElements'一樣評估爲'object'。 – 2011-04-14 20:12:34

1

Live Demo

正如其他人所說,getElementsByTagName返回一個NodeList對象,你需要以不同的方式遍歷它。以下是一些方法來實現檢查/取消收音機的最終目標。

使用jQuery

$.each($('input[type="radio"]'), function() { 
     if (true) // Your condition for checking true 
      $(this).attr('checked','checked'); 
     else 
      $(this).removeAttr('checked'); 
    }); 

沒有jQuery的

var inputs = document.getElementsByTagName('input'); 
for(var i = 0; i < inputs.length; i++){ 
    var input = inputs.item(i); 
    if(input.type == "radio") 
     if (true) // Your condition for checking true 
      input.checked = "checked"; 
     else 
      input.removeAttribute("checked"); 
    } 
}