了解DOM:HTML 5 DOM复杂数据类型
2014-12-22 09:01
323 查看
From:http://www.ido321.com/1324.html
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中的所有表单元素。
二、HTMLOptionsCollection接口
该接口返回一组元素组成的列表,与HTMLCollection不同的是,它特定于返回的是一组option元素责成的列表,并且重写了length属性和namedItem()方法。HTMLSelectElement.options属性返回的数据类型就是HTMLOptionsCollection。
三、DOMTokenList和DOMSettableTokenList
DOMTokenList表示空格隔开的一系列标识。在DOM笔记(三):Element接口和HTMLElement接口中,HTMLElement.classList属性返回的数据类型就是DOMTokenList。DOMSettableTokenList继承自DOMTokenList,唯一不同的就是增加了value属性。HTMLLinkElement.size返回的数据类型是DOMSettableTokenList。
四、DOMStringMap和NodeList
DOMStringMap接口标示一些“键/值对”组成的集合,可以通过JavaScript语法对键值对进行删除、修改等操作。在DOM笔记(三):Element接口和HTMLElement接口中,HTMLElement.dataset属性返回的数据类型就是DOMStringMap
NodeList接口表示一系列节点组成的列表。document.getElementsByTagName()返回的是NodeList对象。其有一个只读的length属性,用于返回节点的数量;还有一个item()方法,用于根据索引访问节点。有如下等价方式:
a335
nodelist.item(0) <=>nodelist[0]<=>nodelist(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接口,利用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()方法,用于根据索引访问节点。有如下等价方式:
a335
nodelist.item(0) <=>nodelist[0]<=>nodelist(0)
相关文章推荐
- DOM笔记(四):HTML 5 DOM复杂数据类型
- DOM笔记(四):HTML 5 DOM复杂数据类型
- 20180301:JavaScript的初步学习,JS的数据类型与变量,函数,DOM操纵HTML,BOM操作浏览器
- html、js前台数据传到后台,spring复杂类型转换
- Java复杂数据类型用法
- 复杂数据类型使用基础
- 深入Atlas系列:Web Sevices Access in Atlas(6) - 对于复杂数据类型的支持(下)
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(6):服务器端和客户端数据类型的自动转换:复杂类型
- 老鼠Atlas之旅(四):提交、返回复杂数据类型给web 服务
- gridview绑定复杂数据类型
- 深入Atlas系列:Web Sevices Access in Atlas(4) - 对于复杂数据类型的支持(上)
- Java复杂数据类型用法
- Gsoap调用java实现的webservice时,如何传递复杂数据类型?
- python_复杂数据类型
- Java的复杂数据类型
- net控件中数据导到Excel的格式 首先,我们了解一下excel从web页面上导出的原理。当我们把这些数据发送到客户端时,我们想让客户端程序(浏览器)以excel的格式读取它,所以把mime类型设为:application/vnd.ms-excel,当excel读取文件时会以每个cell的格式呈现数据,如果cell没有规定的格式,则excel会以默认的格式去呈现该cell的数据。这样就给我们提供了自定义数据格式的空间,当然我们必须使用excel支持的格式。下面就列出常用的一些格式: 1) 文本
- 深入Atlas系列:Web Sevices Access in Atlas(4) - 对于复杂数据类型的支持(上)
- 深入Atlas系列:Web Sevices Access in Atlas(5) - 对于复杂数据类型的支持(中)
- 走近复杂数据库计算型软件的设计与制作(1)-数据类型和默认值 推荐
- NuSOAP笔记:如何创建复杂数据类型