一般的な JavaScript メソッド、属性コレクション、および NodeList スキルと HTMLCollection_javascript スキルのブラウザの違い

     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 接口定义

微软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 类型

---

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接口的定义. 只好在后面找出一份微软的代替之.

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

关于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)

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].

---

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.



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.