DOM notes (4): HTML 5 DOM complex data type_html/css_WEB-ITnose

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, HTMLFormControlsCollection, etc.

1. HTMLCollection, HTMLAllCollection and HTMLFormControlsCollection

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

Attribute or method

Data type

Description

length

long

Read-only, returns the number of elements in the collection. All three interfaces have this attribute

item()

object

1. Get the elements in the collection according to the index. Define

属性或者方法	数据类型	说明
length	long	只读，返回集合中的元素数量。三个接口均有此属性
item()	object	1、根据索引获取集合中的元素。在HTMLCollection中定义 2、在HTMLCollection中有如下等价：        document.forms(0)<=>document.forms[0]<=>document.forms.item(0)
tags()	HTMLAllCollection	根据标签名获取元素。在HTMLAllCollection中定义
namedItem()	object	根据name或者id属性获取集合中的元素，区别如下： 1、在HTMLCollection中，先根据name查找，在根据id查找，但是只返回第一个符合的元素。若不存在符合的元素则返回null。存在如下等价： document.forms['formname']<=>document.forms(‘formname’)<=>document.forms.namedItem(‘formname’) 2、在HTMLAllCollection中，若有多个符合的元素，则返回一个HTMLCollection对象；若只有一个符合元素，则返回该元素。 3、在HTMLFormControlsCollection中，若有多个符合的元素，则返回一个RadioNodeList对象；若只有一个符合元素，则返回该元素。

in HTMLCollection 2. It has the following equivalent in HTMLCollection:
document.forms(0)<=>document.forms[0]<=>document.forms.item(0 )

tags()

HTMLAllCollection

Get elements based on tag names. Defined in HTMLAllCollection

namedItem()

object

Get the elements in the collection based on the name or id attribute. The differences are as follows: 1. In HTMLCollection, first search based on name, then search based on id, but only return the first matching element. If there is no matching element, null is returned. The following equivalents exist:
document.forms['formname']<=>document.forms('formname')<=>document.forms.namedItem('formname')

2. In HTMLAllCollection, if there are multiple matching elements, an HTMLCollection object is returned; if there is only one matching element, the element is returned.

3. In HTMLFormControlsCollection, if there are multiple matching elements, a RadioNodeList object is returned; if there is only one matching element, the element is returned.

属性或方法名	数据类型	说明
length	long	可读写。若属性值大于实际的option元素个数，则HTMLSelectElement自动添加空的option元素; 若属性值小于实际的option元素个数，则HTMLSelectElement自动删除多余的option元素
add()	void	插入一个option元素
namedItem()	object	根据name或id获取集合中的元素
remove()	void	删除一个option元素

2. HTMLOptionsCollection interface

This interface returns a list of elements. Different from HTMLCollection, It specifically returns a list of option elements and overrides the length attribute and namedItem() method. The data type returned by the HTMLSelectElement.options property is HTMLOptionsCollection.

属性或方法	数据类型	说明
length	long	集合中标识的数量
value	DOMString	获取或设置DOMTokenList值
add()	void	插入一个标识
contains()	boolean	判断是否包含某标识
remove()	void	删除一个标识
item()	object	根据索引获取标识
toggle()	boolean	标识存在则删除，不存在则添加
toString()	DOMString	返回对象的字符串形式

3. DOMTokenList and DOMSettableTokenList DOMTokenList represents a series of identifiers separated by spaces. In DOM Notes (3): In the 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 attribute. The data type returned by HTMLLinkElement.size is DOMSettableTokenList.

4. DOMStringMap and NodeList

The DOMStringMap interface marks a collection of "key/value pairs", and the key-value pairs can be deleted, modified, etc. through JavaScript syntax. In DOM Notes (3): Element interface and HTMLElement interface, the data type returned by the HTMLElement.dataset property is DOMStringMap

<html><head>     <title>DOMStringMap</title></head><body>     <img id="ex" data-ship-id="92432" data-x="30" data-y="10"           data-z="90"/>     <script>           var img = document.getElementById("ex");         //访问键值           alert(img.dataset.z);         //设置键值          img.dataset.shipId="343434";         //创建新键值对          img.dataset.defend=100;         //删除键值          delete img.dataset.y;     </script></body></html>

NodeList interface represents a list composed of a series of nodes. document.getElementsByTagName() returns a NodeList object. It has a read-only length property, which is used to return the number of nodes; and an item() method, which is used to access nodes based on index. There are the following equivalent methods:

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