HTML5 DOM 新增数据类型

前言

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

在HTML5 DOM中,新增了如下的内容:

  • HTMLCollection
  • HTMLAllCollection
  • HTMLFormControlsCollection
  • DOMTokenList
  • DOMStringMap

HTMLCollection 、HTMLFormControlsCollection和HTMLAllCollection

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

HTMLFormControlsCollectionHTMLAllCollection都是继承自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()方法,用于根据索引访问节点。

HTML5 DOM 新增数据类型的更多相关文章

  1. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  2. HTML5 INPUT新增属性

    HTML5的input标签新增了很多属性,也是让大家非常兴奋的一件事,用简单的一个属性搞定以前复杂的JS验证.input新增的这些属性,使得html和js的分工更明确了,使用起来十分舒畅.我们先看下i ...

  3. HTML5之新增的元素

    今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...

  4. 重温html5的新增的标签和废除的标签

    HTML5已经盛行有段时间了,对于标签的使用,按照规范,哪些该用,哪些不该用,你是否都掌握了呢.今天我在这里详细列举下: 新增的结构标签 section元素 表示页面中的一个内容区 块,比如章节.页眉 ...

  5. HTML5 input新增的几种类型(数字、日期、颜色选取、范围)

    你可能已经听说过,HTML5里引入了几种新的input类型.在HTML5之前,大家熟知的input类型包括:text(输入框),hidden(隐藏域),submit(提交按钮)等.而HTML5到来之后 ...

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

    HTML 5 DOM定义了一下集合.列表等复杂的数据类型用于实现便捷的操作.相对于HTML 4 DOM,HTML 5 DOM增加了HTMLCollection.DOMTokenList.DOMStri ...

  7. html5中新增的非主体结构的元素

    html5中出了新增了article.section.nav.aside.time主要结构元素外,还增加了一些表示逻辑结构或附加信息的非主体结构元素. 一.header元素 header元素是一种具有 ...

  8. 浅谈ES6新增数据类型:Symbol

    面试中喜闻乐见的问题就是问我们的ES6新增了哪些个新特性 这篇文章一起学习一下新增的数据类型:Symbol JS的原始数据类型:6种Boolean,String,Undefined,NULL,Numb ...

  9. HTML5之新增的元素和废除的元素 (声明:内容节选自《HTML 5从入门到精通》)

    新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. ...

随机推荐

  1. jQuery.trim()方法

    定义和用法 $.trim() 函数用于去除字符串两端的空白字符. 注意:$.trim()函数会移除字符串开始和末尾处的所有换行符,空格(包括连续的空格)和制表符.如果这些空白字符在字符串中间时,它们将 ...

  2. 牛客CSP-S提高组赛前集训营3

    A 货物收集 显然是一个二分答案的题. #include<iostream> #include<cstdio> #include<cstring> #include ...

  3. python解决八皇后问题的方法

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/9/11 15:40 # @Author : Lijinjin # @Site ...

  4. jvm crash分析

    问题描述:线上进程异常退出,查看服务器端日志,有jvm crash文件生成 # # A fatal error has been detected by the Java Runtime Enviro ...

  5. flask学习导航主页

    我就学习了网易课堂的知了Flaskk. 十分感谢. └—01-Flask视图和URL ├—课时001.[Flask预热]课程介绍 ├—课时002.[Flask预热]Flask课程准备工作 ├—课时00 ...

  6. bzoj4009: [HNOI2015]接水果(整体二分)

    题目描述 风见幽香非常喜欢玩一个叫做 osu!的游戏,其中她最喜欢玩的模式就是接水果.由于她已经DT FC 了The big black, 她觉得这个游戏太简单了,于是发明了一个更加难的版本. 首先有 ...

  7. vue2 练习

    table标签的frame和rules属性,可以控制边框的显示.frame属性控制着表格最外围的四条边框的可见性,而 rules 则控制着表格内部边框的可见性. frame属性可取的值及含义如下: * ...

  8. springBoot+websocket集群系列知识

    WebSocket简介和spring boot集成简单消息代理 Spring Boot 集成 websocket,使用RabbitMQ做为消息代理 Spring Websocket实现向指定的用户发送 ...

  9. Huffman树、霍夫曼编码

    Huffman树指的是带权路径长度WPL最小的二叉树 WPL=路径*权值 Huffman常用于压缩编码,正常传输ABCDEF这些字母需要3位二进制树来描述,但由于一篇文章中ABCDEF这些字母出现的概 ...

  10. Oil Deposits (HDU - 1241 )(DFS思路 或者 BFS思路)

    转载请注明出处:https://blog.csdn.net/Mercury_Lc/article/details/82706189作者:Mercury_Lc 题目链接 题解:每个点(为被修改,是#)进 ...