DOM笔记（四）：HTML 5 DOM复杂数据类型

末蓝、 2022-08-06 01:27 158阅读 0赞

HTML 5 DOM定义了一下集合、列表等复杂的数据类型用于实现便捷的操作。相对于HTML 4 DOM，HTML 5 DOM增加了HTMLCollection、DOMTokenList、DOMStringMap、HTMLAllCollection、HTMLFormControlsCollection等。

一、HTMLCollection、HTMLAllCollection和HTMLFormControlsCollection

三个接口均用于表示一组元素组成的列表。HTMLAllCollection和HTMLFormControlsCollection均继承自HTMLCollection接口，对HTMLCollection接口中定义的namedItem()方法进行了重写。在[DOM笔记（一）：HTMLDocument接口][DOM_HTMLDocument]，利用document.forms(/images/embeds等)返回一个HTMLCollection对象，document.all则返回一个HTMLAllCollection对象，document.forms.elements则返回一个HTMLFormControlsCollection对象，该对象包含了form中的所有表单元素。

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

二、HTMLOptionsCollection接口

该接口返回一组元素组成的列表，与HTMLCollection不同的是，它特定于返回的是一组option元素责成的列表，并且重写了length属性和namedItem()方法。HTMLSelectElement.options属性返回的数据类型就是HTMLOptionsCollection。

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

三、DOMTokenList和DOMSettableTokenList

DOMTokenList表示空格隔开的一系列标识。在[DOM笔记（三）：Element接口和HTMLElement接口][DOM_Element_HTMLElement]中,HTMLElement.classList属性返回的数据类型就是DOMTokenList。DOMSettableTokenList继承自DOMTokenList，唯一不同的就是增加了value属性。HTMLLinkElement.size返回的数据类型是DOMSettableTokenList。

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

四、DOMStringMap和NodeList

DOMStringMap接口标示一些“键/值对”组成的集合，可以通过JavaScript语法对键值对进行删除、修改等操作。在[DOM笔记（三）：Element接口和HTMLElement接口][DOM_Element_HTMLElement]中,HTMLElement.dataset属性返回的数据类型就是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接口表示一系列节点组成的列表。document.getElementsByTagName()返回的是NodeList对象。其有一个只读的length属性，用于返回节点的数量；还有一个item()方法，用于根据索引访问节点。有如下等价方式：

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

原文首发：[http://www.ido321.com/1324.html][http_www.ido321.com_1324.html]

下一篇：[DOM笔记（五）：JavaScript的常见事件和Ajax小结 ][DOM_JavaScript_Ajax_]

[DOM_HTMLDocument]: http://www.ido321.com/1315.html
[DOM_Element_HTMLElement]: http://www.ido321.com/1321.html
[http_www.ido321.com_1324.html]: http://www.ido321.com/1324.html
[DOM_JavaScript_Ajax_]: http://www.ido321.com/1327.html