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. 动态调整对话框属性（去掉标题栏，去掉边框，修改类似成Border：NONE样式）（调用ModifyStyle和ModifyStyleEx，然后调用SetWindowPos重新显示）

    // 动态修改对话框属性,去掉对话框标题栏,设置Border为NONE属性. if(dlg.GetSafeHwnd()) { dlg.ModifyStyle(WS_CAPTION, 0); // 去掉 ...

  2. java对称加密（AES）

    java对称加密(AES) 博客分类: Java javaAES对称加密  /** * AESHelper.java * cn.com.songjy.test * * Function: TODO * ...

  3. 在java程序中访问windows有用户名和密码保护的共享目录

    在java程序中访问windows有用户名和密码保护的共享目录 Posted on 2015-11-20 14:03 云自无心水自闲 阅读(3744) 评论(0)  编辑  收藏 --> Jav ...

  4. PHP 语言需要避免的 10 大误区

    PHP是一种非常流行的开源服务器端脚本语言,你在万维网看到的大多数网站都是使用php开发的.但是,你大概很奇怪的注意到有少部分的人发誓要离php 远远的.但是令人更奇怪的是或者很震惊的说他们不用php ...

  5. maven 仓库下载缓慢，怎么解决

    maven下载jar的时候会去寻国外的地址,因此造成了下载jar很缓慢,影响开发效率,于是就出现maven镜像地址,可以使我们开发人员迅速下载相关的jar. 在maven的config的setting ...

  6. Windows 7下配置JDK环境变量和Java环境变量配置

    下面来介绍一下Java环境变量配置,是在Windows 7下配置JDK环境变量. 方法/步骤  1 安装JDK,安装过程中可以自定义安装目录等信息,例如我们选择安装目录为:C:\Program Fil ...

  7. HDU 4864 (2014 Multi-University Training Contest 1 )

    考试时,想到了一个很类似的方法,但是总是差那么点,就是这么点,需要不断的努力啊!!! 题解: 基本思想是贪心. 对于价值c=500*xi+2*yi,yi最大影响100*2<500,所以就是求xi ...

  8. Ext.Net学习笔记01：在ASP.NET WebForm中使用Ext.Net

    Ext.Net是一个对ExtJS进行封装了的.net控件库,可以在ASP.NET WebForm和MVC中使用.从今天开始记录我的学习笔记,这是第一篇,今天学习了如何在WebForm中使用Ext.Ne ...

  9. Lambda表达式【转】

    lambda表达式是对匿名方法的一种改进,具有更加简洁的语法和更易理解的形式,lambda表达式可以包括表达式和语句,并且可以用与创建委托或表达式目录树类型. lambda表达式都使用Lambda运算 ...

  10. poj 1364 King（差分约束）

    题意(真坑):傻国王只会求和,以及比较大小.阴谋家们想推翻他,于是想坑他,上交了一串长度为n的序列a[1],a[2]...a[n],国王作出m条形如(a[si]+a[si+1]+...+a[si+ni ...