JavaScript Advanced Programming---nodelist and htmlcollection

Node objects are a single node, but sometimes a data structure is required to accommodate multiple nodes. The DOM provides two interfaces for deploying a collection of such nodes, namely NodeList and htmlcollection

Definition on MDN:

NodeList:

The NodeList object is a collection of nodes (collections of nodes) returned by the Node.childnodes and Document.queryselectorall methods, and nodelist is generally a dynamic collection Live Collection,

is an instant update (live), which is updated automatically when the structure of the document it contains changes, but the Queryselectorall method returns a static collection.

Htmlcollection

The Htmlcollection interface represents a Universal collection (generic collection) that contains elements (in order of elements in the document flow), and a collection that implements the interface can only contain HTML elements

The htmlcollection in the HTML DOM is instantly updated (live), and it is automatically updated when the structure of the document it contains changes.

Definition of the standard:

Interface nodelist:[arrayclass]interface NodeList {  Getter Node item (unsigned long index);  ReadOnly attribute unsigned long length;}; A NodeList object is a collection of nodes. Interface htmlcollectioninterface htmlcollection {  readonly attribute unsigned long length;  Getter Element? Item (unsigned long index);  Getter Element? Nameditem (domstring name);}; An Htmlcollection object is a collection of elements.

The main difference between the two is that the node nodes collection is a collection of HTML and elements that are updated in real time as the DOM tree changes. Htmlcollection One more nameditem method.

NodeList:

Property: Length.

Returns the number of node nodes in the nodelist.

Method: Item (IDX)

Returns the element found through the index, which returns null over the range. It can also be accessed by an array of parentheses plus an index, and the undefined is returned out of range.

var parent = document.getElementById (' parent '); var child_nodes = parent.childnodes;child_nodes.length; 　　　　　　Let ' s assume "2" Parent.appendchild (document.createelement (' div ')); child_nodes.length; Should output "3"

Dynamic collection, note that Queryselectorall returns a static collection.

　　　　Note: Although the element can be accessed by subscript, nodelist is not an array.

The prototype chain of an array:

MyArray--Array.prototype--object.prototype--NULL

NodeList's prototype chain:

Mynodelist--Nodelist.prototype--object.prototype--NULL

　

Htmlcollection:

Property:

　　　　htmlcollection.length Read Only

　　　　Returns the number of elements in the collection when the neutron element.

　　

Method:

　　　　Htmlcollection.item ()
Returns a specific node based on the given index (starting at 0). Returns null if the index is out of range.

　　　　Htmlcollection.nameditem (ID) more than nodelist out of the way.
Returns the specified node based on the Id, or as an alternative, based on the Name property represented by the string. The name match can only be used as the last dependency and can only be matched if the referenced element supports the name attribute. Returns null if no node matching the given name exists.

var elem1, elem2;//document.forms is a HTMLCollectionelem1 = DOCUMENT.FORMS[0];ELEM2 = Document.forms.item (0); alert ( Elem1 = = = ELEM2); Show "true" Elem1 = document.forms["MyForm"];elem2 = Document.forms.namedItem ("MyForm"); alert (elem1 = = = ELEM2); Show "true"

　　　　

Ways to return to Htmlcollection

var elements = document.getelementsbyclassname (names); Or:var elements = rootelement.getelementsbyclassname (names);//elements is a collection of all the elements found htmlcollection.//names is a string, Represents a list of class names used for matching; The class name is separated by a space//getelementsbyclassname can be called on any element, not just the document. The element that calls this method will be the root element for this lookup. var elements = document.getElementsByTagName (name);//elements is a live htmlcollection Note below) of found elements in//the order they appear in the Tree.//name is a string representing the name of the Eleme Nts. The special string "*"//represents all elements.

Other document.links, Document.images, Document.anchors,

Back to NodeList

elements = document.getelementsbyname (name);//elements is a live NodeList collection//name is the value of the name Attri Bute of the element.elementlist = Document.queryselectorall (selectors);//elementlist is a non-live NodeList of element obj Ects.//selectors is a string containing one or more CSS selectors separated by Commas.var matches = Document.queryselector All ("Div.note, Div.alert");//this example returns a list of all DIV elements within the document with a class of//either "Note" or "alert":

　　

JavaScript Advanced Programming---nodelist and htmlcollection