小小千想和您聊一聊

当前位置: 首页> 技术分享> 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属性获取集合中的元素

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

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

上一篇:运维工程师需要具备哪些性格特质?

下一篇:移动端的布局方案

QQ技术交流群

HTML5/Web前端锋迷群
712051083

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码