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

一、HTMLCollection、HTMLAllCollection和HTMLFormControlsCollection

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

属性或者方法 数据类型 说明
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对象；若只有一个符合元素，则返回该元素。

二、HTMLOptionsCollection接口

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

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

三、DOMTokenList和DOMSettableTokenList

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

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

四、DOMStringMap和NodeList

DOMStringMap接口标示一些“键/值对”组成的集合，可以通过JavaScript语法对键值对进行删除、修改等操作。在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

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

DOM笔记（四）：HTML 5 DOM复杂数据类型的更多相关文章

  1. 2016.01.07 DOM笔记（二） DOM节点

    node节点属性 nodeName属性 oneBox= document.getElementsById('box');var s = oneBox.nodeName;  //nodeName与tag ...

  2. DOM笔记（三）：Element接口和HTMLElement接口

    一.Element接口 Element接口表示一个元素,该接口扩展自Node接口,自然继承了Node接口的属性和方法,也有一套针对元素的属性和方法. Element接口常见的属性比较少,常用的就是一个 ...

  3. DOM笔记（十）：JavaScript正则表达式

    一.RegExp ECMAScript通过RegExp类型类支持正则表达式,语法和Perl类似: var exp = /pattern/flags; patternb部分是任何简单的或复杂的正则表达式 ...

  4. DOM笔记（二）：Node接口

    所有的节点都使用Node接口来表示,可以使用很多方法去获取节点,如document.getElementsByTagName().document.getElementsByName()等均返回一个N ...

  5. 《DOM Scripting》学习笔记-——第三章 DOM

    <Dom Scripting>学习笔记 第三章 DOM 本章内容: 1.节点的概念. 2.四个DOM方法:getElementById, getElementsByTagName, get ...

  6. JAVA与DOM解析器提高（DOM/SAX/JDOM/DOM4j/XPath） 学习笔记二

    要求 必备知识 JAVA基础知识.XML基础知识. 开发环境 MyEclipse10 资料下载 源码下载   sax.dom是两种对xml文档进行解析的方法(没有具体实现,只是接口),所以只有它们是无 ...

  7. DOM笔记（十）：JavaScript正則表達式

    一.RegExp ECMAScript通过RegExp类型类支持正則表達式,语法和Perl类似: var exp = /pattern/flags; patternb部分是不论什么简单的或复杂的正則表 ...

  8. 如鹏网学习笔记（十）DOM

    DOM笔记一.DOM简介 Document Object Model 文档对象模型 DOM的节点树模型:整个文档按照从大到小的节点划分,每一个内容都算作一个节点 DOM API 编程接口 可以用来操作 ...

  9. DOM笔记（十二）：又谈原型对象

    因为之前谢过一篇关于原型对象的笔记:浅谈JavaScript中的原型模式.现在我又重新看到这个话题,对原型有了进一步的理解,所以,又要谈谈原型对象. 一.理解原型对象 创建的每一个函数都有一个prot ...

随机推荐

  1. Swift入门（十一）——类型转换与is、as操作

    三种操作:is.as?和as! Swift是强类型语言,但也允许开发者通过is.as?和as!这三种操作来对类型进行判断和强制转换.其中is用作类型判断,而as?和as!则分别是类型转换的可选形式和强 ...

  2. WCF入门（十二）---WCF异常处理

    WCF服务开发者可能会遇到需要以适当的方式向客户端报告一些不可预见的错误.这样的错误,称为异常,通常是通过使用try/catch块来处理,但同样,这是非常具体的技术. 由于客户端的关注领域不是关于如何 ...

  3. Executing Raw SQL Queries using Entity Framework

    原文 Executing Raw SQL Queries using Entity Framework While working with Entity Framework developers m ...

  4. [iOS]iPhone利用<极光推送>实现远程推送

    准备: 1. 一个Xcode工程 2. 开发者账号 3. 真机 (重要,模拟器无法进行远程推送,因为模拟器没有UDID) 第一步:绑定工程的Bundle Identifer 首先当然要登录https: ...

  5. 关于Linux的时间与时区

    转:http://linux.chinaunix.net/techdoc/beginner/2007/06/22/960790.shtml 首先要说明的是我的系统是fedora,其他系统可能不完全相同 ...

  6. C++：成员运算符重载函数和友元运算符重载函数的比较

    5.2.4 成员运算符重载函数和友元运算符重载函数的比较 (1)对双目运算符而言,成员运算符重载函数参数表中含有一个参数,而友元运算符重载函数参数表中有两个参数:对于单目运算符而言,成员运算符重载函数 ...

  7. Android 类似时间轴的实现

    想要实现图片中的的时间轴的效果,设定了三种颜色,但是出来的只有一个黑色,还不是设定好的,而且长度很长的话不能滚动,下面上代码: 布局文件: <LinearLayout xmlns:android ...

  8. How to learn linux device driver

    To learn device driver development, like any other new knowledge, the bestapproach for me is to lear ...

  9. MySQL 5.7 SYS scheme解析

    sys 库是MySQL 5.7其中的一个系统库,里面有很多很好用的跟性能相关的视图.函数和存储过程, 增强MySQL的易用性 例如:哪些语句使用了临时表,哪个用户请求了最多的io,哪个线程占用了最多的 ...

  10. 分享一个免费SSL证书申请网站，给网站开启https协议 | 张戈博客

    这些天,由于公司的业务需求,接触到了ssl证书和https协议.博客前几篇文章也分享了在WEB服务器上安装SSL证书,为网站开启https协议的教程,感兴趣的童鞋可以前往查看相关文章: <Lin ...