HTML5 DOM 新增数据类型

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

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

    
    


    

        UserName:  
        PassWord: 

        
    

    

        UserName:  
        PassWord: 

        
    

TiP：

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

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

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

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

HTMLOptionsCollection

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

    
    


    

        username: 
        password: 
        
            aaaaa
            aaaaa
            aaaaa
        
        
    

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

• 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。

包含的属性和方法:

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

DOMStringMap和NodeList

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

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

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