Dom Notes (iv): HTML 5 DOM Complex data type

The HTML 5 DOM defines a collection, a list, and other complex data types for easy operation. Htmlcollection, Domtokenlist, Domstringmap, Htmlallcollection, Htmlformcontrolscollection, and so on are added to the HTML 4 dom,html 5 DOM.

I. Htmlcollection, Htmlallcollection and Htmlformcontrolscollection

Three interfaces are used to represent a list of elements of a group. Both Htmlallcollection and htmlformcontrolscollection inherit from the Htmlcollection interface, overriding the Nameditem () method defined in the Htmlcollection interface. In the DOM Note (a): HTMLDocument interface, using document.forms (/images/embeds, etc.) to return a Htmlcollection object, document.all returns a Htmlallcollection object, Document.forms.elements returns a Htmlformcontrolscollection object that contains all the form elements in the form.

in Htmlallcollection

Property or method	Data type	Description
Length	Long	Read-only, returns the number of elements in the collection. This property is available on all three interfaces
Item ()	Object	1. Gets the elements in the collection according to the index. Defined in Htmlcollection 2, in the htmlcollection the following equivalent: Document.forms (0) <=>document.forms[0]<=>document.forms.item (0)
tags ()	< Span style= "font-size:14px" >htmlallcollection
Nameditem ()	Object	Gets the elements in the collection based on the name or ID property, with the following differences: 1, in Htmlcollection, based on the name lookup, in accordance with the ID lookup, but only return the first conforming element. Returns null if no conforming element exists. The following equivalence exists: document.forms[' FormName ']<=>document.forms (' FormName ') <=>document.forms.nameditem (' FormName ') 2. In Htmlallcollection, if there are multiple conforming elements, a Htmlcollection object is returned, and if there is only one conforming element, the element is returned. 3. In Htmlformcontrolscollection, if there are multiple conforming elements, a Radionodelist object is returned, and if there is only one conforming element, the element is returned.

Second, htmloptionscollection interface

The interface returns a list of a set of elements, unlike htmlcollection, which is specific to the list returned by a set of option elements, and overrides the length property and the Nameditem () method. The data type returned by the Htmlselectelement.options property is htmloptionscollection.

Property or method name	Data type	Description
Length	Long	can read and write. If the attribute value is greater than the actual number of option elements, then htmlselectelement automatically adds an empty option element; If the property value is less than the actual number of option elements, the htmlselectelement automatically deletes the extra option element
Add ()	void	Insert an OPTION element
Nameditem ()	Object	Gets the elements in the collection based on name or ID
Remove ()	void	Delete an OPTION element

Iii. Domtokenlist and Domsettabletokenlist

Domtokenlist A series of identities that are separated by spaces. In the DOM Note (c): element interface and HtmlElement interface, the data type returned by the Htmlelement.classlist property is Domtokenlist. Domsettabletokenlist inherits from Domtokenlist, the only difference is the addition of the Value property. The data type returned by Htmllinkelement.size is domsettabletokenlist.

Property or method	Data type	Description
Length	Long	Number of identities in the collection
Value	Domstring	Gets or sets the Domtokenlist value
Add ()	void	Insert an identity
Contains ()	Boolean	Determine if an identity is included
Remove ()	void	Delete an identity
Item ()	Object	Get identity by index
Toggle ()	Boolean	The identity exists then is deleted, and does not exist add
ToString ()	Domstring	Returns the string form of an object

Iv. Domstringmap and NodeList

The Domstringmap interface identifies a set of "key/value pairs" that can be deleted, modified, and manipulated using JavaScript syntax for key-value pairs. In the DOM Note (c): element interface and HtmlElement interface, the data type returned by the Htmlelement.dataset property is Domstringmap

 data-ship-id= "92432"  data-x= data-y= data-z=
      
        "all" 
      /> <script> var  img = docume         Nt.getelementbyid ( "ex" );         //access key value  alert (IMG.DATASET.Z);         //set key value  img.dataset.shipid= "343434" ;         //creates a new key-value pair  img.dataset.defend=100;     //Delete key value  Delete Img.dataset.y; </script></body>

The NodeList interface represents a list of a series of nodes. document.getElementsByTagName () returns the NodeList object. It has a read-only length property that returns the number of nodes, and an item () method that accesses nodes based on the index. There are the following equivalence methods:

Nodelist.item (0) <=>nodelist[0]<=>nodelist (0)

Original starting: http://www.ido321.com/1324.html

Next: Dom Notes (v): Common JavaScript events and Ajax summaries

Dom Notes (iv): HTML 5 DOM Complex data type