DOM note (4): HTML 5 Complex DOM data types

DOM note (4): HTML 5 Complex DOM data types

HTML 5 DOM defines complex data types such as collections and lists for convenient operations. Compared with HTML 4 DOM, HTML 5 DOM adds HTMLCollection, DOMTokenList, DOMStringMap, HTMLAllCollection, and HTMLFormControlsCollection.

1. HTMLCollection, HTMLAllCollection, and HTMLFormControlsCollection

All three interfaces are used to represent a list composed of a group of elements. Both HTMLAllCollection and HTMLFormControlsCollection inherit from the HTMLCollection interface and overwrite the namedItem () method defined in the HTMLCollection interface. In DOM note (1): HTMLDocument interface, use document. forms (/images/embeds) returns an HTMLCollection object, document. all returns an HTMLAllCollection object, document. forms. elements returns an HTMLFormControlsCollection object that contains all form elements in form.

Attribute or Method	Data Type	Description
Length	Long	Read-only, returns the number of elements in the set. This attribute is available for all three interfaces.
Item ()	Object	1. Obtain the elements in the Set Based on the index. Define in HTMLCollection 2. The following are equivalent values in HTMLCollection: Document. forms (0) <=> document. forms [0] <=> document. forms. item (0)
Tags ()	HTMLAllCollection	Obtain the element based on the tag name. Define in HTMLAllCollection
NamedItem ()	Object	Get the elements in the Set Based on the name or id attribute. The differences are as follows: 1. In HTMLCollection, search by name and id first, but only the first matching element is returned. If no matching element exists, null is returned. The following equivalence Values exist: Document. forms ['formname'] <=> document. forms ('formname') <=> document. forms. namedItem ('formname ') 2. In HTMLAllCollection, if there are multiple Conforming Elements, an HTMLCollection object is returned. If there is only one conforming element, this element is returned. 3. In HTMLFormControlsCollection, if there are multiple Conforming Elements, A RadioNodeList object is returned. If there is only one conforming element, this element is returned.

 

Ii. HTMLOptionsCollection Interface

This interface returns a list composed of a group of elements. Unlike HTMLCollection, this interface returns a list specific to the list instructed by a group of option elements and overwrites the length attribute and namedItem () method. The data type returned by the HTMLSelectElement. options attribute is HTMLOptionsCollection.

Attribute or method name	Data Type	Description
Length	Long	Read/write. If the attribute value is greater than the actual number of option elements, HTMLSelectElement automatically adds an empty option element; If the attribute value is smaller than the actual number of option elements, HTMLSelectElement automatically deletes redundant option elements.
Add ()	Void	Insert an option Element
NamedItem ()	Object	Obtains the elements in the Set Based on the name or id.
Remove ()	Void	Deletes an option element.

 

3. DOMTokenList and DOMSettableTokenList

DOMTokenList indicates a series of identifiers separated by spaces. In DOM note (3): In the Element and HTMLElement interfaces, the Data Type returned by the HTMLElement. classList attribute is DOMTokenList. DOMSettableTokenList inherits from DOMTokenList. The only difference is that the value attribute is added. The data type returned by HTMLLinkElement. size is DOMSettableTokenList.

Attribute or Method	Data Type	Description
Length	Long	Number of identifiers in the collection
Value	DOMString	Get or set the DOMTokenList Value
Add ()	Void	Insert an ID
Contains ()	Boolean	Determines whether an ID is included.
Remove ()	Void	Delete an ID
Item ()	Object	Retrieve id based on Index
Toggle ()	Boolean	If the ID already exists, delete it. If it does not exist, add it.
ToString ()	DOMString	String format of the returned object

 

4. DOMStringMap and NodeList

The DOMStringMap interface identifies a set of key/value pairs. You can use JavaScript syntax to delete or modify key-value pairs. DOM note (3): In the Element and HTMLElement interfaces, the Data Type returned by the HTMLElement. dataset attribute is DOMStringMap.

<Html> 
The NodeList interface represents a list of nodes. Document. getElementsByTagName () returns the NodeList object. It has a read-only length attribute used to return the number of nodes. It also has an item () method used to access nodes based on indexes. There are the following equivalent methods:
Nodelist. item (0) <=> nodelist [0] <=> nodelist (0)
First: http://www.ido321.com/1324.html
Next article: DOM notes (5): Common JavaScript events and Ajax Summary