一般的な JavaScript メソッド、属性コレクション、および NodeList スキルと HTMLCollection_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)

Note 0: The collection object returned by non-IE browsers that support querySelectorAll should also be called StaticNodeList. But I don’t know if the return type of the querySelectorAll method defined in the specification is the NodeList type.

But there is an annotation in the specification that this NodeList must be a static object. That is, it will not change with the change of the DOM Tree, and its own changes should not affect the DOM Tree. Then it should no longer be called the NodeList type. .

Note 1: If you print document.all directly in Chrome, you will get undefined. However, it does not affect our access and use of document.all.

Chrome 3-browser is just HTMLCollection, starting from Chrome 4 is HTMLAllCollection

Note 2: Safari 4 is not called HTMLAllCollection but just HTMLCollection

Note 3: In Opera, Safari and other browsers, you can also directly access document.all, but typeof document.all =='undefined' and if(document.all){//The logic here will never will be executed.}.But document.all

can be printed directly



Note 4: Freifox only supports document.all in non-standard mode and it is a very strange thing. Its constructor is Object. This thing seems to have been available since the FireFox 0.8 era. Until now 4.0 beta8...

ps:

.ie6 and 7 can refer to ie8. The test method is to use namedItem or tags to check whether the two methods are implemented to check whether it is nodeList or HTMLCollection.

. Don’t be surprised why there is no window.frames in the list, because actually window.frames is the window object in browsers other than ie6, ie7, and ie8 (ie9 has been modified, so it is the same as other browsers.), that is window === window.frames. Probably window.frames in IE6, 7, and 8 is a shallow copy of the window object. So actually, to get an iframe, we only need window[index||name].

---

Summary:

Although it seems that the only difference between NodeList and HTMLCollection is a namedItem method. But this method itself is only to find the first element in the current collection that matches the name or id

In order to facilitate memory and search, we should try to use indexers uniformly instead of item and namedItem methods. However, it should be noted that IE and Firefox do not implement name indexers for NodeList. Opera's nodeList indexer may return a NodeList collection (childNodes interface). Considering that most of the problems lie in the childNodes interface, we need to bear in mind. Just avoid using indexers for the childNodes interface. For the querySelectorAll interface, even Opera does not support the name index of the NodeList (Static) it returns. Then the selector of querySelectorAll can find matching nodes at once. Or avoid using the name indexer and use the Number Index indexer to filter.



A few issues that should be noted about the ['name'] indexing method are:

1. IE returns an HTMLCollection collection (IE probably thinks that if there are form elements in the element collection being searched, and the names may be repeated, then the return value should be a collection, not a single element.), and it is not The form element name will be ignored.

2. FireFox and opera browsers will ignore document.compatMode, ignore id or name, ignore whether it is a form element, and only find the first element that matches either id or name as an index or namedItem() parameter.

3. The webkit browser ignores document.compatMode, ignores id, ignores name, ignores whether it is a form element, and only finds the element whose id matches.