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

Source: Internet
Author: User
Tags list of attributes
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.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.