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属性获取集合中的元素

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

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<form name="myform1">

		UserName: <input type="text" name="username" id="username" placeholder="请输入用户名">

		PassWord: <input type="password" name="password" placeholder="请输入密码">

		<input type="submit" value="提交">

	</form>

	<form name="myform2">

		UserName: <input type="text" name="username" placeholder="请输入用户名">

		PassWord: <input type="password" name="password" placeholder="请输入密码">

		<input type="submit" value="提交">

	</form>

</body>

<script type="text/javascript">

	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)

</script>

</html>

TiP：

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

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

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

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

HTMLOptionsCollection

该接口返回一组元素组成的列表，与HTMLCollection不同的是，它特定于返回的是一组option元素组成的列表，并且重写了length属性和namedItem()方法。HTMLSelectElement.options属性返回的数据类型就是 HTMLOptionsCollection。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<form name='myforms'>

		username: <input type="text" name="username">

		password: <input type="password" name="password">

		<select>

			<option>aaaaa</option>

			<option>aaaaa</option>

			<option>aaaaa</option>

		</select>

	</form>

</body>

<script type="text/javascript">

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

	console.log(opt.options) // HTMLOptionsCollection

</script>

</html>

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

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。

<div id="d1" class="d1 info user"></div>

<script>

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

var info = d1.classList;

console.log(info) // DOMTokenList

</script>

包含的属性和方法:

length
value 获取或设置DOMTokenList值
add() 插入一个标识
contains() 判断是否包含某标识
remove() 删除一个标识
item() 根据索引获取标识
toggle() 标识存在则删除，不存在则添加

DOMStringMap和NodeList

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

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()方法，用于根据索引访问节点。