zoukankan      html  css  js  c++  java
  • DOM笔记(四):HTML 5 DOM复杂数据类型

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

    一、HTMLCollection、HTMLAllCollection和HTMLFormControlsCollection

         三个接口均用于表示一组元素组成的列表。HTMLAllCollection和HTMLFormControlsCollection均继承自 HTMLCollection接口,对HTMLCollection接口中定义的namedItem()方法进行了重写。在DOM笔记(一):HTMLDocument接口, 利用document.forms(/images/embeds等)返回一个HTMLCollection对象,document.all则返回一个 HTMLAllCollection对象,document.forms.elements则返回一个 HTMLFormControlsCollection对象,该对象包含了form中的所有表单元素。

    属性或者方法 数据类型 说明
    length long 只读,返回集合中的元素数量。三个接口均有此属性
    item() object 1、根据索引获取集合中的元素。在HTMLCollection中定义

    2、在HTMLCollection中有如下等价:
           document.forms(0)<=>document.forms[0]<=>document.forms.item(0)

    tags() HTMLAllCollection 根据标签名获取元素。在HTMLAllCollection中定义
    namedItem() object 根据name或者id属性获取集合中的元素,区别如下:

    1、在HTMLCollection中,先根据name查找,在根据id查找,但是只返回第一个符合的元素。若不存在符合的元素则返回null。存在如下等价:
    document.forms['formname']<=>document.forms(‘formname’)<=>document.forms.namedItem(‘formname’)

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

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

     

    二、HTMLOptionsCollection接口

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

    属性或方法名 数据类型 说明
    length long 可读写。若属性值大于实际的option元素个数,则HTMLSelectElement自动添加空的option元素;
    若属性值小于实际的option元素个数,则HTMLSelectElement自动删除多余的option元素
    add() void 插入一个option元素
    namedItem() object 根据name或id获取集合中的元素
    remove() void 删除一个option元素

     

    三、DOMTokenList和DOMSettableTokenList

         DOMTokenList表示空格隔开的一系列标识。在DOM笔记(三):Element接口和HTMLElement接口中,HTMLElement.classList 属性返回的数据类型就是DOMTokenList。DOMSettableTokenList继承自DOMTokenList,唯一不同的就是增加了 value属性。HTMLLinkElement.size返回的数据类型是DOMSettableTokenList。

    属性或方法 数据类型 说明
    length long 集合中标识的数量
    value DOMString 获取或设置DOMTokenList值
    add() void 插入一个标识
    contains() boolean 判断是否包含某标识
    remove() void 删除一个标识
    item() object 根据索引获取标识
    toggle() boolean 标识存在则删除,不存在则添加
    toString() DOMString 返回对象的字符串形式

     

    四、DOMStringMap和NodeList

          DOMStringMap接口标示一些“键/值对”组成的集合,可以通过JavaScript语法对键值对进行删除、修改等操作。在DOM笔记(三):Element接口和HTMLElement接口中,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()方法,用于根据索引访问节点。有如下等价方式:

          nodelist.item(0) <=>nodelist[0]<=>nodelist(0)

    原文首发:http://www.ido321.com/1324.html

    下一篇:DOM笔记(五):JavaScript的常见事件和Ajax小结

  • 相关阅读:
    hadoop-0.20-集群搭建___实体机通过SSH访问基于VM安装的Linux
    Kettle的集群排序 2——(基于Windows)
    在使用Kettle的集群排序中 Carte的设定——(基于Windows)
    POJ3083
    本地tomcat访问mysql数据库
    正则表达式——(一)
    图论——读书笔记 (深度优先搜索)
    c# 反射+Attribute 实现获取Description的两种做法
    排序方法的总结
    c# 初识Actor Model
  • 原文地址:https://www.cnblogs.com/ido321/p/4156729.html
Copyright © 2011-2022 走看看