DOM笔记(四):HTML 5 DOM复杂数据类型
来源:互联网 发布:网络推广访问者 编辑:程序博客网 时间:2024/04/30 14:56
一、HTMLCollection、HTMLAllCollection和HTMLFormControlsCollection
三个接口均用于表示一组元素组成的列表。HTMLAllCollection和HTMLFormControlsCollection均继承自HTMLCollection接口,对HTMLCollection接口中定义的namedItem()方法进行了重写。在DOM笔记(一):HTMLDocument接口,利用document.forms(/images/embeds等)返回一个HTMLCollection对象,document.all则返回一个HTMLAllCollection对象,document.forms.elements则返回一个HTMLFormControlsCollection对象,该对象包含了form中的所有表单元素。
属性或者方法数据类型说明lengthlong只读,返回集合中的元素数量。三个接口均有此属性item()object1、根据索引获取集合中的元素。在HTMLCollection中定义2、在HTMLCollection中有如下等价:
document.forms(0)<=>document.forms[0]<=>document.forms.item(0)
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。
属性或方法名数据类型说明lengthlong可读写。若属性值大于实际的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。
属性或方法数据类型说明lengthlong集合中标识的数量valueDOMString获取或设置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复杂数据类型
- 了解DOM:HTML 5 DOM复杂数据类型
- DOM 与 HTML DOM(笔记)
- HTML DOM学习笔记(四)_DOM 事件
- DOM学习笔记(四)
- DOM学习笔记四
- HTML DOM笔记1
- HTML DOM笔记
- HTML DOM笔记
- HTML DOM学习笔记
- HTML DOM学习笔记(三)_常用DOM 属性
- JavaScript学习笔记(四)DOM
- JavaScrip学习笔记(四)---DOM基础
- JavaScript学习笔记(二)---HTML DOM
- DOM、HTML DOM、XML DOM
- HTML DOM 教程(5)
- HTML 5 Video + DOM
- HTML 5 Video + DOM
- 【Processing】初学
- HDU 2019
- CSS3圆角详解:border-radius
- C++读写CSV文件
- HDU 2020
- DOM笔记(四):HTML 5 DOM复杂数据类型
- HDU 2021
- 获取手机的储存空间
- HDU 2022
- 一致性。
- HDU 2023
- UVA - 536 Tree Recovery
- HDU 2024
- 程立支付宝首席架构师,视频演讲地址,