Home > Developer > Web Develop
In a recent reading of JavaScript advanced programming, I saw the phrase: "Understanding nodelist and Htmlcollection is the key to a thorough understanding of the DOM in general." , so I think we should write a blog about nodelist and htmlcollection to get a good understanding and summarize the knowledge points.
NodeListNodeList is a collection of nodes (which can contain elements and other nodes), and in the DOM, there are 12 types of nodes, and the types of nodes are judged by judging the nodetype of the nodes.
We can get to a NodeList object by Node.childnodes and Document.queryselectall () (there are many interfaces to return to NodeList, which are not listed here.)
The NodeList object has a length property and the item () method, and length indicates the number of nodes that are obtained for the NodeList object, where the node is emphasized, and item () can pass in a lasso to access the elements of the corresponding index in the nodelist.
1 <Body>2 <DivID= "Node">3 text Node4 <!--Comment Node -5 <span>Node1</span>6 <span>Node2</span>7 <span>Node3</span>8 </Div>9 </Body>Ten <Script> One varnode=document.getElementById ('node'), A nodelists=Node.childnodes - Console.log (nodelists.length)//Output is 9 - </Script>
In the above HTML code, the "Text node" and the parent node's space (attached text) are counted as a text node, followed by a comment node and a space between the comment node and the element node (the line produces a space, the space is counted as a text node), This is followed by a text node that wraps between an element node and an element node, three element nodes and two text nodes between element nodes, and finally the text nodes resulting from the last space between the element node and the parent element, which is a total of 9 nodes.
One of the major features of the NodeList object is that the content it returns is dynamic (live), which means that the code we get above nodelists is something like "pointers", So in the following code, after we get the nodelists and then insert a created span tag into node, It was found that Nodelists.length became 10, but the Queryselectorall returned by this interface is a special NodeList object, which is a static (static) object. And is a collection of elements.
1 <Body>2 <DivID= "Node">3 text Node4 <!--Comment Node -5 <span>Node1</span>6 <span>Node2</span>7 <span>Node3</span>8 </Div>9 </Body>Ten <Script> One varnode=document.getElementById ('node') A varnodelists=Node.childnodes - varQuerynodes=Node.queryselectorall ('span') - Node.appendchild (Document.createelement ('span')) the Console.log (nodelists.length)//output is ten - Console.log (querynodes.length)//output is 3 - </Script>Htmlcollection
Htmlcollection is a collection of elements that, like nodelist, have a length property to represent the lengths of Htmlcollection objects, or they can be accessed by passing in an element index through Elements.item (). At the time it also had a nameitem () method that could return the name attribute in the collection and the id attribute worth the element. Many properties of the HTMLDocument interface are htmlcollection objects that provide a convenient way to access document elements such as forms, images, and links. For example, the properties of Document.images and Document.forms are htmlcollection objects.
1 <Body>2 <imgsrc= "Test.png"ID= "Image1">3 <imgsrc= "Test.png"ID= "Image2">4 <imgsrc= "Test.png"ID= "Image3">5 <imgsrc= "Test.png"ID= "Image4">6 <imgsrc= "Test.png"ID= "Image5">7 <imgsrc= "Test.png"ID= "Image6">8 </Body>9 <Script>Ten Console.log (Document.images.namedItem ('Image1')) // One </Script>
The Htmlcollection collection is as dynamic as the NodeList object, and all they get is a reference to the node or collection of elements.
Htmlcollection and NodeList real-time sexAs I said before, they don't even have a static snapshot of the state of the history document, but it's real-time, which is a very surprising feature that changes as the document changes, which is worth our attention, when we normally use some DOM interfaces to return some DOM collections, This is often overlooked.
The real-time nature of htmlcollection and nodelist is very useful, but sometimes when we iterate over a nodelist or Htmlcollection object, we typically choose to generate a snapshot or static copy of the current object:
1 var staticlists = Array.prototype.slice.call (nodelistorhtmlcollection, 0)
In this way, we can safely do some pruning and inserting operations on the current DOM collection, which is useful when the DOM is in intensive operation.
and MDN. A method for transforming the nodelist into an array Dom extension prototype (in IE6/7: http://perfectionkills.com/whats-wrong-with-extending-the-dom/) is mentioned:
var arraymethods = object.getownpropertynames (array.prototype); Arraymethods.foreach ( attacharraymethodstonodelist); function attacharraymethodstonodelist (methodName) { if(methodName!== "Length") { = Array.prototype[methodname]; }; var divs = document.getelementsbytagname (' div ' ); var firstdiv = divs[0 ];firstdiv.childnodes.foreach (function(divchild) { = ' #0F0 ';});The DOM was originally designed for parsing XML and then used in HTML. We can divide the DOM into two parts, the core and the Html,core section, to provide the most basic XML parsing API description, and the HTML section to add its own API specifically for DOM parsing in HTML. NodeList interface is embodied in the core, htmlcollection is in the HTML section, different browsers will implement their different interfaces, manufacturers of the nature of the canonical organization will make these more canonical, and do not appear before the return of the NodeList object, But it's static.
This article a lot of ideas are their own in peacetime and online some of the blog learned, which added a lot of their own organization and understanding, the purpose is to comb some of the more in-depth knowledge points, if there are omissions and errors written, please also point out.
NodeList and Htmlcollection in the DOM
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
