DOM笔记(四):HTML 5 DOM复杂数据类型

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小结

时间: 2024-10-15 09:49:11

DOM笔记(四):HTML 5 DOM复杂数据类型的相关文章

DOM笔记(三):Element接口和HTMLElement接口

一.Element接口 Element接口表示一个元素,该接口扩展自Node接口,自然继承了Node接口的属性和方法,也有一套针对元素的属性和方法. Element接口常见的属性比较少,常用的就是一个只读的tagName属性,该属性返回元素名,数据类型是DOMString. Element接口定义的方法也主要是针对属性操作,常见方法如下: 方法名 数据类型 说明 getAttribute DOMString 返回对应属性 getAttributeNode Attr 返回对应属性节点 getAtt

DOM笔记(十):JavaScript正則表達式

一.RegExp ECMAScript通过RegExp类型类支持正則表達式,语法和Perl类似: var exp = /pattern/flags; patternb部分是不论什么简单的或复杂的正則表達式:flags是每一个正則表達式所带的一个或者多个标志. 正則表達式的模式匹配支持三个标志: g:全局模式,即模式应用于整个字符串.而非在发现第一个匹配项时马上停止 i:不区分大写和小写模式 m:多行模式,即到达一行文本末尾是还会继续茶查找下一行中是否存在与模式匹配的项. 1.创建正則表達式 Ja

DOM笔记(十二):又谈原型对象

因为之前谢过一篇关于原型对象的笔记:浅谈JavaScript中的原型模式.现在我又重新看到这个话题,对原型有了进一步的理解,所以,又要谈谈原型对象. 一.理解原型对象 创建的每一个函数都有一个prototype属性,它指向这个函数的原型对象.利用原型模式创建的方法和属性是被所有实例所共享的. function Person(){} Person.prototype.name="dwqs"; Person.prototype.age=20; Person.prototype.sayNam

DOM笔记(十):JavaScript正则表达式

一.RegExp ECMAScript通过RegExp类型类支持正则表达式,语法和Perl类似: var exp = /pattern/flags; patternb部分是任何简单的或复杂的正则表达式:flags是每个正则表达式所带的一个或者多个标志. 正则表达式的模式匹配支持三个标志: g:全局模式,即模式应用于整个字符串,而非在发现第一个匹配项时立即停止 i:不区分大小写模式 m:多行模式,即到达一行文本末尾是还会继续茶查找下一行中是否存在与模式匹配的项. 1.创建正则表达式 JavaScr

如鹏网学习笔记(十)DOM

DOM笔记一.DOM简介 Document Object Model 文档对象模型 DOM的节点树模型:整个文档按照从大到小的节点划分,每一个内容都算作一个节点 DOM API 编程接口 可以用来操作页面的任意一部分内容 js+DOM编程的思想:由js基本语法控制程序的执行逻辑,由DOM API进行元素的查找获取,进而再对元素进行增删改等操作 学习DOM,除开学习设计思想外,更多的是学习DOM API的用法 二.document对象 document对象, 是Windows对象的一个属性, 表示

DOM笔记(二):Node接口

所有的节点都使用Node接口来表示,可以使用很多方法去获取节点,如document.getElementsByTagName().document.getElementsByName()等均返回一个NodeList对象,然后获取其中的节点. 节点对应的属性和放大均在Node接口予以定义: 1.Node接口常见的属性列表 属性名 数据类型 说明 nodeName DOMString 返回节点名 nodeValue DOMString 返回节点值 nodeType int 返回节点类型(见后文) p

[XML]学习笔记(九)DOM

DOM是一个使程序和脚本有能力动态的访问和更新文档的内容.结构以及样式的平台和语言中立的接口,主要被分为三个不同的部分:核心DOM.XML DOM和HTML DOM.http://www.w3school.com.cn/xmldom/dom_intro.asp 一.JAXP接口(Java API for XMLParsing) a)        org.w3c.dom W3C推荐的用于XML标准规划文档对象模型的接口. b)        org.xml.sax 用于对XML进行语法分析的事件

DOM笔记(十三):JavaScript的继承方式

在Java.C++.C#等OO语言中,都支持两种继承方式:接口继承和实现继承.接口继承制继承方法签名,实现继承则继承实际的方法和属性.在SCMAScript中,由于函数没有签名,所以无法实现接口继承,只支持实现继承. 实现继承主要依靠原型链来实现. 一.原型链 原型链是利用原型让一个引用类型继承另一个引用类型的方法,在DOM笔记(十二):又谈原型对象中,描述了构造函数.实例和原型之间的关系: 每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而每个实例都包含一个指向原型对象的内部

DOM笔记(五):JavaScript的常见事件和Ajax小结

一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 onmouseover 鼠标的光标移动到某对象上时触发 onmousemove 鼠标移动时触发 onmouseout 鼠标光标离开某对象时触发 ps:当单击一次鼠标左键的时候,将同时触发onclick.onmousedown.onmouseup三个事件,事件处理程序执行的先后顺序为:onmousedow