Htmlcollection and nodelist

The following method gets the htmlcollection object

 
Document. images // All IMG elements document. links // all elements a and area with the href attribute document. anchors // all elements a with the name attribute document. forms // All form elements document. scripts // All script elements document. applets // All applet elements document. embeds // All embed elements document. plugins // document. same as embeds document. getelementbyid ("table "). childrendocument. getelementbyid ("table "). tbodiesdocument. getelementbyid ("table "). rowsdocument. getelementbyid ("row "). cellsdocument. getelementbyid ("map "). areasdocument. all // htmlallcollection, similar to htmlcollection document. getelementbyid ("F2 "). elements // htmlformcontrolscollection extends htmlcollectiondocument. getelementbyid ("S "). options // htmloptionscollection extends htmlcollection
 

The following method gets the nodelist object

Document. getelementsbyname ("bing") document. getelementsbyclassname ("no") document. getelementsbytagname ("A") document. getelementsbytagnamens ("*", "A") document. queryselectorall ("A") document. getelementbyid ("table "). childnodesdocument. stylesheets // stylesheetlist, similar to nodelist
 

I. Similarities

Htmlcollection and nodelist have many similarities.

1. All are class array objects

All have the Length attribute and can be iterated through the for loop.

2. Read-Only

3. All are real-time, that is, changes to the document will be immediately reflected on the relevant objects.

 
VaR F = document. forms; console. log (F. length); // 2var temp = document. createelement ("form"); document. body. appendchild (temp); console. log (F. length); // 3
 

One exception is that the nodelist returned by document. queryselectorall is not real-time.

4. The item () method is available.

You can use item (INDEX) or Item ("ID") to obtain elements.

5. You can access elements through attributes, such as document. Forms. F1 (F1 is the form ID)

Ii. Differences

1. The htmlcollection object has the nameditem () method. You can pass the ID or name to obtain the element.

2. The item () method of htmlcollection and the element (document. Forms. F1) obtained through attributes can support ID and name, while the nodelist object only supports ID

Appendix: ExampleCodeHtml

<! Doctype HTML>