Native Dom Exploration--NodeList v.s. htmlcollection

Main API that involves getting elements

When getting native DOM elements, it mainly involves these Dom APIs (linked to living standard):

• Nodeand corresponding setsNodeList
• Element(Inheritance Node ) and corresponding setsHTMLCollection
• Document(Inherited Node )

Note: The plan supersedes NodeList and HTMLCollection is Elements not currently widely implemented

Basic knowledge--NodeList v.s. htmlcollection

In different versions of the browser, if you use the DOM method to get multiple elements, some will get NodeList (many old browsers), some will get HTMLCollection (more new browsers), it is necessary to understand the difference between the two.

There is a good question and answer on the StackOverflow about these two types of differences.

In fact, as long as the first look at the living standard in the two types of IDL, you can guess the approximate. NodeListthe IDL is as follows:

Interface NodeList {  getter Nodelong  index);   ReadOnly Long length;  Iterable<Node>;};

And HTMLCollection the IDL is as follows:

Interface htmlcollection {  readonlylong  length;  Getter Elementlong  index);  Getter Element? Nameditem (domstring name);};

Same point:

1. They all have length attributes.
2. All have elements of getter, calleditem

Different points:

1. NodeListThe element is Node , HTMLCollection the element is Element .

   ElementInherited from Node , is Node a kind of, in HTML, it is generally an HTML element (for example, such as <p> <a> a tag created by the object). and Node as a parent class, there Element are some other subclasses, such as the text within the HTML element corresponding to the document, corresponding to the Text Document annotation Comment .

   HTMLCollection, only Element , and NodeList in can have Element ,, and Text Comment so many elements. Ordinarily, if the Get element returns the list only Element , then these two kinds of not much difference, but in fact many times the browser will parse the HTML text to get Text and put in the list to Comment put back. For example, the following section of code

   < Div >    <!-- -     <p>This is Some Text</p > </ Div >

   If the sub-elements of this div are returned in the list, then the NodeList browser can give a maximum of 5 elements (different browsers may be different) if it is returned.

   1. A break between a <div> and a comment and a space (or tab) as text node (yes, a blank symbol between tags can also be parsed as text node)
   2. Note as comment node
   3. Comment and break <p> between and spaces (or tab) as text node
   4. pAs Element
   5. </p>And </div> between the break and space (or tab) as text node

   As a result, NodeList there may be a lot of text node and comment node that are not required for general DOM operations to be processed. And that's HTMLCollection a lot simpler, only <p> one element, and that's the result of being more intuitive to most people.

2. HTMLCollectionThere is also a namedItem way to get the elements quickly. Let's say that there is an HTML:

    <  div     >  <!--  Comment     -->  <  p  >  This is Some text</ p  >  <  img  name  = "test"   src  = "Test.jpg"  >  </ div  >  

   So assuming that the sub-elements of this div are composed HTMLCollection , called list , then use list.namedItem("test") can directly get inside the img elements.

   Lookup order reference living standard, but in reality not all browsers follow standards. For example, if there are multiple elements with the same ID or name, as long as the first one is returned, Chrome and opera will return them in a htmlcollection or nodelist, see MDN.

There are a few points that you can't see from IDL.

1. These two classes are all "live". Manipulating the elements will be reflected in the DOM in real time (and therefore expensive if multiple DOM operations are performed directly on such lists at once).
2. itemAnd namedItem all can be [] called by the abbreviation, and some browsers also support () the use of abbreviations to call (that is, can, list[index] list[key] or list(index) , list(key) ), and directly with the dot notation call namedItem (for example list.key ).
3. Some browsers support NodeList calls namedItem or indirectly through [] , () dot notation, namedItem but because of the different browser support, it is best not to NodeList do this kind of operation.
4. IE8 and the following versions of the browser, comments belong HTMLCommentElement , counted Element , and therefore appear in HTMLCollection .

Native Dom Exploration--NodeList v.s. htmlcollection