快捷導(dǎo)航

javascript常用方法、屬性集合及NodeList 和 HTMLCollection 的瀏覽器差異

更新時(shí)間：2010年12月25日 23:20:44 作者：

對(duì)于 HTMLCollection集合對(duì)象必須要說一說的是 namedItem方法. 看看規(guī)范的解釋.

在您開始本文的閱讀前,我強(qiáng)烈建議您可以先讀一讀此篇:http://w3help.org/zh-cn/causes/SD9004.

HTMLCollection 接口定義

interface HTMLCollection
{
      readonly attribute unsigned long   length;
      Node               item(in unsigned long index);
      Node               namedItem(in DOMString name);
}

對(duì)于 HTMLCollection集合對(duì)象必須要說一說的是 namedItem方法. 看看規(guī)范的解釋.

原文:
namedItem method
This method retrieves a Node using a name. With [HTML 4.01] documents, it first searches for a Node with a matching id attribute. If it doesn't find one, it then searches for a Node with a matching name attribute, but only on those elements that are allowed a name attribute. With [XHTML 1.0] documents, this method only searches for Nodes with a matching id attribute. This method is case insensitive in HTML documents and case sensitive in XHTML documents.

翻譯:

namedItem 方法:

此方法獲通過 "name"屬性來獲取節(jié)點(diǎn).

在HTML4.01文檔中,它首先搜索的是節(jié)點(diǎn)的ID屬性的值. 如果沒找到匹配節(jié)點(diǎn),才去搜索name 屬性與之匹配的節(jié)點(diǎn). 即HTML4.01 DTD下,瀏覽器們應(yīng)該優(yōu)先通過ID來獲取節(jié)點(diǎn).其次才是name.

在XHTML 1.0文檔中,則僅搜索ID與之匹配的節(jié)點(diǎn).

對(duì)于節(jié)點(diǎn)(id or name)屬性的值,此方法在HTML文檔中忽略大小寫區(qū)別,而在XHTML文檔中.則要區(qū)別大小寫.

上文中粗體部分很重要,沒有這個(gè)作為指導(dǎo)的話.后面遇到的一些問題就很不好確定孰是孰非.因?yàn)楸姸酁g覽器的實(shí)現(xiàn)并不一樣.

NodeList 接口定義

interface NodeList {
Node item(in unsigned long index);
readonly attribute unsigned long length;
};

微軟MSDN上查到的 NodeList實(shí)現(xiàn) ,雖然這些資料告訴我們 NodeList繼承了 Microsoft.SpeechServer.Dom.Collections.Collection Class . 但是事實(shí)卻并不如此. 事實(shí)上,ie瀏覽器的NodeList不具備 ICollection接口定義的 namedItem 和 tags 兩個(gè)方法. 實(shí)現(xiàn)了他們的只有HTMLCollection類型.

此文檔是 Speech Server 2007 用的,所以應(yīng)該僅供參考.只能說明IE瀏覽器中的NodeList 還是遵守標(biāo)準(zhǔn)的.

public sealed class NodeList : Collection, INodeList, IEnumerable, IExpando, IReflect

NodeList的繼承鏈:

System.Object

　　Microsoft.SpeechServer.Dom.Shim

　　　　Microsoft.SpeechServer.Dom.DynamicShim

　　　　　　Microsoft.SpeechServer.Dom.Collections.Collection

　　　　　　Microsoft.SpeechServer.Dom.Collections.NodeList

Collection 實(shí)現(xiàn)的ICollection接口定義的屬性和方法表

public properties : item(msdn上說item是重載,我表示詫異...),length

public methods : item,namedItem,tags

ps:

1. 目前只有Opera的NodeList Class 是派生自 Collection Class 或HtmlCollection Class 的.所以此瀏覽器中NodeList集合對(duì)象也會(huì)具備 HTMLCollection接口實(shí)現(xiàn)的所有屬性和方法.

2. MS 的ICollection 接口定義了一個(gè)tags方法用來根據(jù)tagName獲取元素集合.其類型為 HTMLCollection 類型

神秘的 StaticNodeList

interface NodeSelector {
Element querySelector(in DOMString selectors);
NodeList querySelectorAll(in DOMString selectors);
}

The NodeList object returned by the querySelectorAll() method must be static, not live ([DOM-LEVEL-3-CORE], section 1.1.1)

由于w3.org的[DOM-LEVEL-3-CORE]文檔中,并沒有StaticNodeList接口的定義. 只好在后面找出一份微軟的代替之.

微軟的一些相關(guān):

基于 NodeList Class 是個(gè)密封類. 我們可以初步了解StaticNodeList 并不像最初我認(rèn)為的那樣,可能派生自NodeList. 而且規(guī)范說的明白. 這個(gè)集合是靜態(tài)的.就是說它不會(huì)隨著DOM樹的變化而變化. 這種選擇性去除基類能力的做法不符合繼承的思想.所以只可能是另外的一個(gè)東東了.

Members Table

The following table lists the members exposed by the StaticNodeList object.

Attributes/Properties

Property Description

length Gets the number of characters in a TextNode object.

Methods

Method Description

item Retrieves an object from a childNodes or StaticNodeList collection.

Property	Description
length	Gets the number of characters in a TextNode object.

Method	Description
item	Retrieves an object from a childNodes or StaticNodeList collection.

Remarks

The collection will be empty if the querySelectorAll method returned no matches.

If the element tree is changed relative to the one or more original selectors used to generate the StaticNodeList collection, the collection (being static) will not be updated when the element tree changes.

測(cè)試:IE, Firefox3.6, Chrome10 Dev, Opera 11, Safari 5.02

測(cè)試主要針對(duì)nodeList 和 HTMLCollection, 并不涉及 xpath 以及namedNodeMap.等

關(guān)于namedNodeMap https://developer.mozilla.org/En/DOM/NamedNodeMap , http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1780488922

結(jié)果:

限定方	方法\瀏覽器	IE8	IE9 beta7930.16406	FireFox4.0 beta7	Chrome10.0 Dev	Safari5.02	Opear11
W3C DOM2	getElementsByTagName	HTMLCollection	HTMLCollection	HTMLCollection	NodeList	NodeList	NodeList
WHATWG HTML5	getElementsByClassName	HTMLCollection	HTMLCollection	HTMLCollection	NodeList	NodeList	NodeList
W3C DOM1	getElementsByName	HTMLCollection	HTMLCollection	HTMLCollection	NodeList	NodeList	NodeList
W3c Selectors API 1	querySelectorAll	StaticNodeList	StaticNodeList	NodeList(Static)(注0)	NodeList(Static)	NodeList(Static)	NodeList(Static)
W3C DOM1	childNodes	NodeList	NodeList	NodeList	NodeList	NodeList	NodeList
MS	children	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	document.links	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	document.images	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	document.anchors	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	document.forms	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	document.applets	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	formElement.elements	HTMLFormElement	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	selectElement.options	HTMLSelectElement	HTMLSelectElement	HTMLOptionsCollection	HTMLOptionsCollection	HTMLOptionsCollection	HTMLOptionsCollection
w3c DOM1	tableElement.rows	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	rowElement.cells	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
MS	document.all	HTMLCollection	HTMLCollection	(S)-(注4) (Q)object HTML document.all class	HTMLAllCollection(注1)	HTMLAllCollection(注2)	HTMLCollection(注3)

注0: 非IE 且支持 querySelectorAll 的瀏覽器返回的集合對(duì)象應(yīng)該也叫StaticNodeList .但不知是否因規(guī)范中定義querySelectorAll方法返回類型為NodeList類型.

但規(guī)范中有注解這個(gè)NodeList 必須為靜態(tài)的對(duì)象.即不隨著DOM Tree的改變而改變, 其自身的改變也不應(yīng)該影響到DOM Tree.那么他就不該再叫NodeList類型.

注1: Chrome中直接打印document.all,會(huì)得到undefined . 但是并不影響我們對(duì)document.all的訪問和使用.

Chrome3-瀏覽器中僅僅是HTMLCollection,從Chrome4開始才是HTMLAllCollection

注2: Safari4中并不叫HTMLAllCollection 而只是 HTMLCollection

注3:Opera、Safari等瀏覽器中.也可以直接訪問document.all , 但是 typeof document.all =='undefined' 以及 if(document.all){//此處邏輯永遠(yuǎn)不會(huì)被執(zhí)行.}.但可以直接打印document.all

注4:Freifox在非標(biāo)準(zhǔn)模式,才支持document.all 且是一個(gè)很奇怪的東西.其構(gòu)造器是Object. 這東西從FireFox 0.8時(shí)代貌似就有了.一直到現(xiàn)在的4.0 beta8 ...

ps:

.ie6,7可以參考ie8,測(cè)試方式是使用namedItem 或 tags 兩個(gè)方法是否被實(shí)現(xiàn)來檢查其是否為nodeList 還是 HTMLCollection.

.不要奇怪為什么列表中沒有window.frames,因?yàn)閷?shí)際上window.frames在ie6,ie7,ie8(ie9已修改,所以同其他瀏覽器一樣.)以外的瀏覽器中,就是window對(duì)象,即window === window.frames. ie6,7,8中大概window.frames是window對(duì)象的一個(gè)淺表復(fù)制. 所以實(shí)際上,要獲取一個(gè)iframe,我們只需要 window[index||name]即可.

總結(jié):

雖然看起來NodeList 和HTMLCollection 的差別僅在于一個(gè) namedItem 方法. 但這個(gè)方法本身也僅僅是在當(dāng)前集合中找到name 或 id符合的元素第一個(gè)元素出來

為了方便記憶,方便查找.我們應(yīng)該盡量統(tǒng)一使用索引器代替 item以及namedItem方法. 但應(yīng)注意 IE,Firefox對(duì)NodeList沒有實(shí)現(xiàn)name索引器.Opera 的nodeList索引器則可能返回一個(gè)NodeList集合(childNodes接口). 考慮到大多數(shù)問題出在childNodes接口上.我們緊緊需要銘記.對(duì)childNodes接口避免使用索引器即可. 對(duì)于querySelectorAll接口,甚至Opera也不支持其返回的NodeList(Static)的name索引器了.那么querySelectorAll的選擇器一次性找到符合節(jié)點(diǎn)即可. 或者避免使用name索引器,改用 Number Index 索引器來篩選.

關(guān)于['name']索引方式應(yīng)該注意的幾個(gè)問題是 :

1. IE 又返回一個(gè)HTMLCollection集合(IE大概認(rèn)為如果查找的元素集合中有表單元素,且name可能會(huì)出現(xiàn)重復(fù).那么返回值就應(yīng)該是一個(gè)集合.而不是單一元素.),且非表單元素name會(huì)被無視.

2.FireFox 和 opera 瀏覽器會(huì) 無視document.compatMode ,無視id或name,無視是否為表單元素,僅找出第一個(gè)符合 id或name任意一個(gè)為索引或namedItem()參數(shù)的元素.

3.webkit瀏覽器則無視document.compatMode,無視id,無視name,無視是否為表單元素,而僅僅找出id符合的元素.

您可能感興趣的文章: