DIV CSS 佈局教程網

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

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符合的元素.