DOM笔记(四):HTML 5 DOM复杂数据类型_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:52:31
Original
1034 Leute haben es durchsucht

  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"/ alt="DOM笔记(四):HTML 5 DOM复杂数据类型_html/css_WEB-ITnose" >     <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>
Nach dem Login kopieren

       NodeList接口表示一系列节点组成的列表。document.getElementsByTagName()返回的是NodeList对象。其有一 个只读的length属性,用于返回节点的数量;还有一个item()方法,用于根据索引访问节点。有如下等价方式:

      nodelist.item(0) nodelist[0]nodelist(0)

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage