Common javascript methods, attribute sets, and browser differences between NodeList and HTMLCollection _ javascript skills

The namedItem method must be mentioned for HTMLCollection objects. Before you begin reading this article, I strongly recommend that you read this article: http://w3help.org/zh-cn/causes/SD9004.
HTMLCollection Interface Definition

InterfaceHTMLCollection
{
Readonly attribute unsigned long length;
NodeItem(In unsigned long index );
NodeNamedItem(In DOMString name );
}

The namedItem method must be mentioned for HTMLCollection objects.

Original: NamedItem method This method retrieves a Node using a name. with [HTML 4.01] events, 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] events, 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.Translation:NamedItem method:This method obtains the node through the "name" attribute.In HTML4.01, it first searches for the value of the node ID attribute. if no matching node is found, the node matching the name attribute is searched. that is, in the HTML4.01 DTD, the browser should first obtain the node through ID. followed by name.In the XHTML 1.0 document, only nodes whose ids match are searched.For the value of the node (id or name) attribute, this method ignores the case sensitivity in HTML documents, while in XHTML documents, the Case sensitivity is required.

The bold part is very important in the above text. Without this as a guide, it is difficult to determine whether or not it is the same as the implementations of many browsers.

NodeList Interface Definition
Interface NodeList {
NodeItem(In unsigned long index );
Readonly attribute unsigned longLength;
};

The NodeList implementation found on Microsoft MSDN tells us that NodeList inheritsMicrosoft. speechServer. dom. collections. collection Class. but this is not the case. in fact, the NodeList of IE does not have the namedItem and tags methods defined by the ICollection interface. only the HTMLCollection type is implemented..This document is used by Speech Server 2007, so it should be for reference only. It can only indicate that NodeList in IE browser still complies with the standard. public sealed class NodeList : Collection, INodeList, IEnumerable, IExpando, IReflect Inheritance chain of NodeList: System. Object Microsoft. SpeechServer. Dom. ShimMicrosoft. SpeechServer. Dom. DynamicShimMicrosoft. SpeechServer. Dom. Collections. Collection 　　　　　　Microsoft. SpeechServer. Dom. Collections. NodeList List of attributes and methods defined by the ICollection interface implemented by Collection Public properties: item (in msdn, item is overloaded, I am surprised...), lengthPublic methods: item, namedItem, tags

Ps: 1. currently, only the NodeList Class of Opera is derived from the Collection Class or HtmlCollection Class. therefore, the NodeList collection object in this browser also has all the attributes and methods implemented by the HTMLCollection interface. 2. the ICollection interface of the MS defines a tags method to get the element set according to the tagName. its type is HTMLCollection.

Mysterious StaticNodeList
InterfaceNodeSelector {
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)

Because w3.org DOM-LEVEL-3-CORE The StaticNodeList interface is not defined in this document. I have to find a replacement from Microsoft.

Microsoft: Based on NodeList Class, it is a seal Class. we can initially understand that StaticNodeList may not be derived from NodeList, as I initially thought. and the specifications are clear. this set is static. that is to say, it will not change with the changes of the DOM tree. this kind of Selective Removal of base class capabilities does not conform to the idea of inheritance. so it may be another one.

Members Table

The following table lists the members exposed by StaticNodeList Object.

Attributes/Properties

Property	Description
Length	Gets the number of characters in TextNode Object.

Methods

Method	Description
Item	Retrieves an object from ChildNodes Or StaticNodeList Collection.

Remarks

The collection will be empty if QuerySelectorAll Method returned no matches.

If the element tree is changed relative to the one or more original selectors used to generate StaticNodeList Collection, the collection (being static) will not be updated when the element tree changes.

Test: IE, Firefox3.6, Chrome10 Dev, Opera 11, Safari 5.02 The test is mainly for nodeList and HTMLCollection, and does not involve xpath and namedNodeMap. About namedNodeMap Https://developer.mozilla.org/En/DOM/NamedNodeMap, Http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1780488922 Result:

Restricted party	Method \ Browser	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)(Note 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 )-(Note 4)(Q) object HTML document. all class	HTMLAllCollection(Note 1)	HTMLAllCollection(Note 2)	HTMLCollection(Note 3)

Note 0: The set object returned by a browser that does not support IE and querySelectorAll should also be called StaticNodeList. However, I wonder if the querySelectorAll method is defined in the specification and the return type is NodeList. Note that the NodeList must be a static object. that is, without changing the DOM Tree, its own changes should not affect the DOM Tree. so he should not be called NodeList again.

Note 1: Printing document. all directly in Chrome will get undefined. But it does not affect our access and use of document. all. Chrome3-only HTMLCollection in the browser and HTMLAllCollection from Chrome4

NOTE 2: Safari4 is not called HTMLAllCollection but only HTMLCollection.

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

Bytes

Note 4: Freifox supports document only in non-standard mode. all is a strange thing. the constructor is an Object. this seems to have been available in the FireFox 0.8 era. until now, 4.0 beta8...

For ps:. ie6, 7, refer to ie8. the test method is to use namedItem or tags to check whether the method is nodeList or HTMLCollection.

. Don't wonder why there is no window in the list. frames, because actually window. frames in ie6, ie7, and ie8 (ie9 has been modified, so it is the same as other browsers .) in other browsers, It is the window object, that is, window = window. frames. the window in ie6, 7, and 8 is approximate. frames is a superficial copy of the window object. therefore, to obtain an iframe, we only need window [index | name.

Summary:Although it seems that the difference between NodeList and HTMLCollection is only one namedItem method. however, this method only finds the first element that matches the name or id in the current set to facilitate memory and search. we should try our best to use the indexer instead of the item and namedItem methods. however, you should note that IE and Firefox do not implement name indexer for NodeList. opera's nodeList indexer may return a NodeList set (childNodes interface ). the childNodes interface causes most of the problems. we need to keep it in mind. do not use the indexer for the childNodes interface. for the querySelectorAll interface, even Opera does not support the NodeList (Static) name indexer returned by it. then, the querySelectorAll selector can find the matching node at a time. you can also avoid using the name indexer by using the Number indexer to filter data. zookeeper Several notes about the ['name'] index method are as follows:1. IE returns another HTMLCollection set (IE probably thinks that if the element set to be searched has a form element, and the name may be repeated. the returned value is a set. instead of a single element .), the non-form element name is ignored. 2. fireFox and opera will ignore document. compatMode, regardless of id or name, and whether it is a form element, only find the first element that matches the id or name as the index or namedItem () parameter. 3. the webkit browser ignores document. compatMode, regardless of id, name, and form elements.