NodeList와 HTMLCollection_javascript 기술 간의 일반적인 javascript 메서드, 속성 컬렉션 및 브라우저 차이점

在您开始本文的阅读前,我强烈建议您可以先读一读此篇: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 还是遵守标准的.

<strong><span><span style="COLOR: #a8a8a8">public sealed class NodeList : Collection, INodeList, IEnumerable, IExpando, IReflect</span></span></strong>

<span style="COLOR: #a8a8a8"><strong><span><span><strong><span style="COLOR: #a8a8a8">NodeList的继承链:</span></strong></span></span></strong></span>

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: querySelectorAll을 지원하는 IE 이외의 브라우저에서 반환되는 컬렉션 개체도 StaticNodeList로 호출해야 합니다. 그런데 사양에 정의된 querySelectorAll 메서드의 반환 유형이 NodeList 유형인지는 알 수 없습니다.

그러나 이 NodeList는 정적 개체여야 한다는 주석이 있습니다. 즉, DOM 트리가 변경되어도 변경되지 않으며 자체 변경 사항이 DOM 트리에 영향을 주지 않아야 합니다. 더 이상 NodeList 유형으로 불려서는 안 됩니다.

참고 1: document.all을 Chrome에서 직접 인쇄하면 정의되지 않음이 표시되지만 document.all 액세스 및 사용에는 영향을 미치지 않습니다.

Chrome 3 브라우저는 HTMLCollection일 뿐이며, Chrome 4부터는 HTMLAllCollection입니다.

참고 2: Safari 4는 HTMLAllCollection이 아니라 HTMLCollection이라고 합니다.

참고 3: Opera, Safari 및 기타 브라우저에서는 document.all에 직접 액세스할 수도 있지만 typeof document.all =='undefine' 및 if(document.all){//여기의 논리는 절대로 실행되지 않습니다.}.그러나 document.all

은 직접 인쇄할 수 있습니다.



참고 4: Freifox는 비표준 모드에서만 document.all을 지원하며 이는 매우 이상한 일입니다. 이 기능은 FireFox 0.8 베타8부터 사용 가능한 것 같습니다. ...

ps:

.ie6과 7은 ie8을 참조할 수 있습니다. 테스트 방법은 명명된 항목이나 태그를 사용하여 두 가지 방법이 구현되었는지 확인하여 nodeList인지 HTMLCollection인지 확인하는 것입니다.

목록에 window.frames가 없는 이유에 놀라지 마십시오. 실제로 window.frames는 ie6, ie7 및 ie8 이외의 브라우저에서 창 개체이기 때문입니다(ie9는 수정되었으므로 동일합니다). 즉, window === window.frames입니다. 아마도 IE6, 7 및 8의 window.frames는 window 객체의 얕은 복사본이므로 실제로 iframe을 얻으려면 window[index]만 필요합니다. ||이름].

---

요약:

NodeList와 HTMLCollection의 유일한 차이점은 명명된Item 메서드인 것처럼 보이지만 이 메서드 자체는 현재 컬렉션에서 이름이나 ID와 일치하는 첫 번째 요소를 찾는 것뿐입니다.



['name'] 색인 생성 방법에 관해 주의해야 할 몇 가지 문제는 다음과 같습니다.

1. IE는 HTMLCollection 컬렉션을 반환합니다. (IE는 아마도 검색 중인 요소 컬렉션에 양식 요소가 있고 이름이 반복될 수 있다면 반환 값은 단일 요소가 아닌 컬렉션이어야 한다고 생각할 것입니다.) 양식 요소 이름은 무시됩니다.

2. FireFox 및 Opera 브라우저는 document.compatMode를 무시하고, id 또는 name을 무시하고, 양식 요소인지 여부를 무시하고, index 또는 명명된Item() 매개변수로 id 또는 name과 일치하는 첫 번째 요소만 찾습니다.

3. 웹킷 브라우저는 document.compatMode, ID, 이름을 무시하고 양식 요소인지 여부를 무시하며 ID가 일치하는 요소만 찾습니다.