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

2019-11-21 00:01:36

字體：大中小

來源：轉載

供稿：網友

在您開始本文的閱讀前,我強烈建議您可以先讀一讀此篇: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);
}

對于 HTMLCollection集合對象必須要說一說的是 namedItem方法. 看看規范的解釋.

原文:
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"屬性來獲取節點.

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

在XHTML 1.0文檔中,則僅搜索ID與之匹配的節點.

對于節點(id or name)屬性的值,此方法在HTML文檔中忽略大小寫區別,而在XHTML文檔中.則要區別大小寫.

上文中粗體部分很重要,沒有這個作為指導的話.后面遇到的一些問題就很不好確定孰是孰非.因為眾多瀏覽器的實現并不一樣.

NodeList 接口定義

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

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

此文檔是 Speech Server 2007 用的,所以應該僅供參考.只能說明IE瀏覽器中的NodeList 還是遵守標準的.

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 實現的ICollection接口定義的屬性和方法表

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

public methods : item,namedItem,tags

ps:

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

2. MS 的ICollection 接口定義了一個tags方法用來根據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接口的定義. 只好在后面找出一份微軟的代替之.

微軟的一些相關:

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

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.

測試:IE, Firefox3.6, Chrome10 Dev, Opera 11, Safari 5.02

測試主要針對nodeList 和 HTMLCollection, 并不涉及 xpath 以及namedNodeMap.等

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

結果:

限定方	方法/瀏覽器	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 的瀏覽器返回的集合對象應該也叫StaticNodeList .但不知是否因規范中定義querySelectorAll方法返回類型為NodeList類型.

但規范中有注解這個NodeList 必須為靜態的對象.即不隨著DOM Tree的改變而改變, 其自身的改變也不應該影響到DOM Tree.那么他就不該再叫NodeList類型.

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

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

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

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

注4:Freifox在非標準模式,才支持document.all 且是一個很奇怪的東西.其構造器是Object. 這東西從FireFox 0.8時代貌似就有了.一直到現在的4.0 beta8 ...

ps:

.ie6,7可以參考ie8,測試方式是使用namedItem 或 tags 兩個方法是否被實現來檢查其是否為nodeList 還是 HTMLCollection.

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

總結:

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

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

關于['name']索引方式應該注意的幾個問題是 :

1. IE 又返回一個HTMLCollection集合(IE大概認為如果查找的元素集合中有表單元素,且name可能會出現重復.那么返回值就應該是一個集合.而不是單一元素.),且非表單元素name會被無視.

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

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

上一篇：extjs之去除s.gif的影響

下一篇：javascript與webservice的通信實現代碼