html table 加数据类型,HTML5 DOM 新增数据类型

前言

相对于HTML4当中的DOM，在HTML5中的DOM，新增了很多复杂数据类型，为实际的应用提供了便捷的操作。

在HTML5 DOM中，新增了如下的内容：

· HTMLCollection

· HTMLAllCollection

· HTMLFormControlsCollection

· DOMTokenList

· DOMStringMap

HTMLCollection 、HTMLFormControlsCollection和HTMLAllCollection

这三个接口主要用来表示一组元素标签的构成。

HTMLFormControlsCollection和HTMLAllCollection都是继承自HTMLCollection。

var forms = document.forms

console.log(forms) // HTMLCollection

通过上面的document.forms可以获取网页当中的所有的form表单，而表单的集合，就是一个HTMLCollection集合。

var alls = document.all

console.log(alls) // HTMLAllCollection

通过上面的document.all可以获得网页当中的所有标签，而标签的集合，就是一个HTMLAllCollection集合。

var formElements = document.forms[0].elements

console.log(formElements) // HTMLFormControlsCollection

通过上面的document.forms[index].elements可以获得forms表单集合当中的一个表单中的所有控件，而这个表单控件的集合就是一个HTMLFormControlsCollection集合。

上面三个接口，存在下面的属性或者方法。

· length 返回集合中元素的数量，三个接口都具备此属性

· item() 根据索引获得集合中的元素 ，于HTMLCollection中定义

· namedItem() 根据name或者id属性获取集合中的元素

用法可以参考下面的代码:

Document

UserName:

PassWord:

UserName:

PassWord:

var myforms = document.forms

console.log(myforms) // HTMLCollection

// length 属性

console.log(myforms.length) // 1

// item()

console.log(document.forms.item(1)); // myform2

// namedItme()

var username = document.getElementsByTagName('input').namedItem('username')

console.log(username)

TiP：

namedItem() 一些需要注意的点:

1、在HTMLCollection中，先根据name查找，在根据id查找，但是只返回第一个符合的元素。若不存在符合的元素则返回null。

2、在HTMLAllCollection中，若有多个符合的元素，则返回一个HTMLCollection对象;若只有一个符合元素，则返回该元素。

3、在HTMLFormControlsCollection中，若有多个符合的元素，则返回一个RadioNodeList对象;若只有一个符合元素，则返回该元素。

HTMLOptionsCollection

该接口返回一组元素组成的列表，与HTMLCollection不同的是，它特定于返回的是一组option元素组成的列表，并且重写了length属性

和namedItem()方法。HTMLSelectElement.options属性返回的数据类型就是 HTMLOptionsCollection。

Document

username:

password:

aaaaa

aaaaa

aaaaa

var opt = document.forms[0].elements[2]

console.log(opt.options) // HTMLOptionsCollection

其中包括的属性或者方法:

· length 该属性可读写。若属性值大于实际的option元素个数，则HTMLSelectElement自动添加空的option元素;

若属性值小于实际的option元素个数，则HTMLSelectElement自动删除多余的option元素

· add() 插入一个option元素

· namedItem 根据name或id获取集合中的元素

· remove() 删除一个option元素

DOMTokenList和DOMSettableTokenList

DOMTokenList表示空格隔开的一系列标识。HTMLElement.classList

属性返回的数据类型就是DOMTokenList。DOMSettableTokenList继承自DOMTokenList，唯一不同的就是增加了

value属性。HTMLLinkElement.size返回的数据类型是DOMSettableTokenList。

var d1 = document.getElementById('d1');

var info = d1.classList;

console.log(info) // DOMTokenList

包含的属性和方法:

· length

· value 获取或设置DOMTokenList值

· add() 插入一个标识

· contains() 判断是否包含某标识

· remove() 删除一个标识

· item() 根据索引获取标识

· toggle() 标识存在则删除，不存在则添加

DOMStringMap和NodeList

DOMStringMap接口标示一些“键/值对”组成的集合，可以通过JavaScript语法对键值对进行删除、修改等操作。

HTMLElement.dataset属性返回的数据类型就是DOMStringMap.

DOMStringMap

data-z="90"/>

var img = document.getElementById("ex");

//访问键值

alert(img.dataset.z);

//设置键值

img.dataset.shipId="343434";

//创建新键值对

img.dataset.defend=100;

//删除键值

delete img.dataset.y;

NodeList接口表示一系列节点组成的列表。document.getElementsByTagName()返回的是NodeList对象。其有一

个只读的length属性，用于返回节点的数量;还有一个item()方法，用于根据索引访问节点。