2011-06-28 76 views
6

如果在窗體中有多個表單元素name,則表單中elements集合中的條目最終是這些字段的集合(這很方便)。 DOM2HTML規範covers the elements collection但是當有多個具有相同名稱的字段時,似乎並未立即指定此行爲。行爲是否覆蓋了標準(DOM2 HTML規範或其他規範中的其他位置)?具有相同名稱的表單元素反映在DOM中

爲了清楚起見,我不問問訪問這些字段的最佳方式是什麼。我在問,他們最終以elements集合中的集合(各種集合)是否被一個標準覆蓋,如果是的話,哪一個。

實施例(live copy):

HTML:

<form id="theForm"> 
<input type="text" name="foo" value="one"> 
<input type="text" name="foo" value="two"> 
</form> 

JavaScript的:

var form = document.getElementById("theForm"), 
    foo = form.elements.foo, 
    index; 
console.log("typeof foo = " + typeof foo); 
if (typeof foo !== "undefined") { 
    console.log("Object#toString says: " + Object.prototype.toString.call(foo)); 
} 
if ('length' in foo && 'item' in foo) { 
    console.log("Looks like a collection of some kind:"); 
    for (index = 0; index < foo.length; ++index) { 
    console.log(index + ": " + foo[index].value); 
    } 
} 

樣本輸出(對於鉻):

typeof foo = object 
Object#toString says: [object NodeList] 
Looks like a collection of some kind: 
0: one 
1: two

我檢查IE6 ,7,8,an d 9,Firefox 4.0,Firefox 3.6,Chrome 12,Opera 11和Safari 5.它們都使elements中的某個類型的集合(Chrome,Firefox和Safari使其成爲NodeList [儘管Safari上的typeof 「函數」而不是「對象」],而IE和Opera使它成爲HTMLCollection,但它們全都具有length,item[]訪問權限)。我只是試圖找到指定行爲的標準(如果有的話)。

+0

爲什麼不使用document.getElementsByName(「fieldNAME」),它將在所有瀏覽器中返回一個數組 – mplungjan

+1

@mplungjan:@ T.J。只是想知道這種行爲是否定義在某個地方。 –

+0

@mplungjan:引用:*「我不是在問什麼是訪問這些字段的最佳方式,我是問他們是否以'元素'集合中的集合(各種類型)一個標準,如果是這樣的話。「*我知道我可以使用'getElementsByName'(儘管它會給我所有具有該名稱的元素**,而不僅僅是表單中的元素)。問題的關鍵是標準。 –

回答

2

它被HTML5規範草案(和WH AT-WG的版本),在這種情況下,似乎更多的記錄怎麼總是工作,下段上HTMLFormControlsCollectionW3C refWHAT-WG ref):

如果有多個匹配的項目,則[HTMLFormControlsCollectionW3C refWHAT-WG ref)返回包含所有這些元素的對象。

+0

謝謝!我已經更新了W3C鏈接到HTML5規範的答案,因爲這絕對是一個規範主體(不要讓我開始討論關於WHAT-WG/W3C關係的政治)。奇怪的名字(這些可能不是單選按鈕),但嘿。這與'namedItem'函數具體相關,但是要感謝[DOM2 HTML規範的ECMAScript映射部分](http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/DOM2 -HTML.html#ecma-script-binding)我們知道[]使用它。 –

+0

HTML規範中的[]]訪問實際上來自[WebIDL規範](http://dev.w3.org/2006/webapi/WebIDL/)。 'namedItem'函數是一個[特殊操作](http://dev.w3.org/2006/webapi/WebIDL/#dfn-special-operation),稱爲_named getter_。 – Carey

+0

我知道必須從DOM2 HTML規範中獲得一些東西,在我的參考列表中,它是「嗯,這是什麼版本?」一。很好,謝謝 - WebIDL現在在我的參考清單上。 –

0

似乎有形式的訪問和在Firefox 4.0.1 DOM的訪問和5

http://jsfiddle.net/mplungjan/jMnWP/

form.foo之間的差:

typeof formFoo = object 
Object#toString says: [object NodeList] 
Looks like a collection of some kind: 
0: one 
1: two 

document.getElementsByName( 「foo」 的) :

typeof docFoo = object 
Object#toString says: [object HTMLCollection] 
Looks like a collection of some kind: 
0: one 
1: two 
+0

不在Chrome .. –

+0

有趣! (Firefox 3.6也是如此。)Opera做同樣的事情,但反過來('formFoo'是'HTMLCollection',但'docFoo'是'NodeList')。 (順便說一句,這是更多的*評論*而不是*答案*。) –

+0

我發佈了一個答案,因爲我可以格式化答案。我可以刪除它,如果你覺得它沒有任何價值 – mplungjan

相關問題