JS魔法堂:那些困扰你的DOM集合类型

一、前言                                  

  大家先看看下面的js,猜猜结果会怎样吧!

  可选答案:

  ①. 获取id属性值为id的节点元素

  ②. 抛namedItem is undefined的异常

var nodes = document.getElementsByName('dummyName');
var node = nodes.namedItem('id');

  答案是两种都有可能哦!document.getElementsByName在Chrome和FF30.0中返回NodeList(木有namedItem方法的),在IE全系列中都返回HTMLCollection,吐血了吧?

  DOM集合又何止这些呢,下面我们就一起来探讨一下吧!

二、困扰你我的NodeList与HTMLCollection              

相同点:

    1. 类数组。有length属性,可以用下标索引来访问其中的元素,但没有Array的slice等方法;

    2. 只读。无法增删其中的元素;

    3. 实时同步DOM树的变化。若DOM树有新元素加入,该类型的对象也会将新元素包含进来;

    4. 可通过下标数字类型索引获取集合中指定位置的元素;

    5. 可通过item({String | Number} 索引)方法获取集合中指定位置的元素,若通过索引找不到元素,则以第一个元素作为返回值。

不同点(主要表现在HTMLCollection比NodeList能力更强大):

    1. HTMLCollection对象可通过namedItem({String} id或name)获取首个匹配的元素,若没有则返回null;

    2. HTMLCollection对象可通过点方式获取第个id或name匹配的元素,若没有则返回undefined。

  各浏览器选择器返回类型差别:

// IE678 返回具有HTMLCollection特征(有namedItem方法)的[object Object]对象
// IE9、10、11、FF、Chrome均返回HTMLCollection
document.images;
document.links;
document.anchors;
document.forms;
document.embeds;
document.scripts;
document.applets;
document.plugins;
Node对象.getElementsByTagName;
Node对象.getElementsByTagNameNS;
Node对象.getElementsByClassName;
HTMLTableElement对象.tBodies;
HTMLTableElement对象.children;
HTMLTableElement对象.rows;
HTMLTableRowElement对象.cells;
HTMLMapElement对象.areas;


// IE678 返回具有HTMLCollection特征(有namedItem方法)的[object Object]对象
// IE9、10、11返回HTMLCollection
// FF30.0、Chrome返回NodeList
document.getElementsByName;

// IE678 返回具有NodeList特征(无namedItem方法)的[object Object]对象
// IE9、10、11、FF、Chrome均返回NodeList
Node对象.childNodes;

// IE5678 返回具有HTMLCollection特征(有namedItem方法)的[object Object]对象
// IE9、10返回[object HTMLCollection]
// IE11、Chrome返回[object HTMLAllCollection]
// FF30.0返回[object HTML document.all class]
document.all;

 1. 总体来说Chrome的实现更接近W3C规范;

 2. HTMLAllCollection、HTMLCollection和[object HTML document.all class]功能没什么区别,只是类型不同而已;

 3. 由于document.getElementsByName在不同的浏览器中返回不同类型的对象,因此推荐使用[{Number} 索引]的方法来访问集合元素会省心一些;

 4. 题外话:children属性仅获取nodeType为1的元素,而childNodes会将所有子元素的包含进来;

 5. 注意:IE9、10、11的HTMLCollection与其他浏览器的HTMLCollection可不相同哦,具体请看下一节吧!

三、同名不同性——IE下怪异的HTMLCollection               

  假如大家看过《JS魔法堂:追忆那些原始的选择器》,应该会了解到在IE5678下,document.all会返回一个类函数对象,也就是上文说到的带有HTMLCollection特征的[object Object]对象。其实IE这一传统一直延续到IE11,这就导致IE9、10、11下的HTMLCollection与W3C标准出现同名而不同性质的问题了。

  何为类函数?

纯属本人私自定义而已,用于指那些拥有函数的特征,但instanceof Function却返回false的对象。

     真心想对IE说一句,你这么吊,你妈妈知道吗?

四、StaticNodeList——伪装成NodeList的小子                

  从IE8开始就多了个querySelectorAll选择器方法。具体行为如下:

// IE8返回 [object Object], IE9+和chrome、FF就返回[object NodeList]
var nodes =  document.querySelectorAll('*');

// IE8返回 空集合[object Object],IE9+和chrome、FF就抛至少是1个函数入参的异常
nodes = document.querySelectorAll();

// 各浏览器均抛SyntaxError异常
nodes = document.querySelectorAll('') 或 document.querySelectorAll(非字符串类型入参);

大家不要被浏览器返回的NodeList所蒙骗,其实querySelectorAll返回的是StaticNodeList对象。其特征与NodeList基本无异,唯一的区别就是StaticNodeList是不会实时同步DOM树变化,因此在polyfill querySelectorAll的时候就不用考虑实时同步DOM树变化的问题了。 

五、HTMLOptionsCollection——HTMLCollection的子类            

  HTMLSelectElement对象.options会返回一个HTMLOptionsCollection集合对象,集合内存储HTMLOptionElement类型的元素。HTMLOptionsCollection类型除了父类HTMLCollection的特征外,还有如下成员方法、属性可用。

add({HTMLOptionElement} opt[, {HTMLOption | Number} before]); // 将选项元素加入到集合的最后,或指定的元素(位置)的后面
remove({Number} index);// 删除指定位置的选项
selectedIndex; // 当前选中项的索引,从0开始

六、HTMLFormControllersCollection——HTMLCollection的子类         

  HTMLFormElement对象.elements会返回一个HTMLFormControllersCollection集合对象,集合内存储各种表单元素。它特别之处是通过点属性获取id或name匹配的元素时,一般的HTMLCollection集合对象在即使有多个匹配的元素的情况下,仅返回首个匹配的元素;而HTMLFormControllersCollection,在有一个匹配的元素时就返回该元素,若有多个匹配的元素则返回一个RadioNodeList集合对象。

七、RadioNodeList——NodeList的子类                      

  初看RadioNodeList很有可能以为集合元素就是单选表单元素,其实RadioNodeList可以存储任意类型的表单元素。不过其value属性就值显示其中被选中的单选项表单元素的value值,若没有单选项表单元素,或没有选中单选项表单元素,那么value值为空字符串。

八、HTMLAllCollection——HTMLCollection的子类               

  IE11、Chrome开始,document.all将返回HTMLCollection子类HTMLAllCollection的对象,其行为特征和HTMLCollection一致。但IE11中的HTMLAllCollection还可以当作函数使用,具体请看本文的第三节。

九、NamedNodeMap——无序Attr元素集合                    

  HTMLElement对象.attributes会返回NamedNodeMap集合对象,内部保存的是[object Attr]类型的对象。NamedNodeMap和HTMLCollection、NodeList不同,因为它是无序集合,虽然可以通过数字类型的下标索引访问NamedNodeMap集合中的元素,但该索引值并不真实代表元素在集合中的位置。下面是NamedNodeMap的成员方法:

[{String} 属性名]
item({Number | String} 索引)
getNamedItem(); //通过名称返回指定的属性节点
getNamedItemNS(); //通过名称和命名空间返回指定的属性节点
setNamedItem(); //通过名称设置指定的属性节点
setNamedItemNS(); //通过名称和命名空间设置指定的属性节点
removeNamedItem(); //通过名称删除指定的属性节点
removeNamedItemNS(); //通过名称和命名空间删除指定的属性节点

  注意:HTMLElement对象.attributes仅返回显示属性(简单地说就是直接写在html标签上的属性,或通过setAttribute设置的属性,具体请看《JS魔法堂:不要再被Attribute和Property困扰我们了》)

十、DOMTokenList——HTML5新特性classList的类型哦!        

  用过classList的都知道它大大提高了我们设置css类的效率,但IE10以下却不支持,polyfill可以帮我们一把。但在polyfill前,我们应该先了解清楚classList的类型DOMTokenList的特征。

  1. 只读

  2. 实时同步相应元素的className属性值的变化

  3. 拥有以下方法和属性

 {Undefined} add({String} class); // 已存在的类不会被重复添加
 {Undefined}  remove({String} class)
 {Undefined}  toggle({String} class)
 {Boolean} contains({String} class); //检查是否有指定的类
 item({Number} 索引); //通过索引获取指定位置的类
 length; //表示类的个数
 // 无法通过[{Number} 索引]的方式来设置类,只能通过该方式来获取类

  那么现在我们就着手polyfill吧,注意难点在实时同步这一块,解决办法就是用onpropertychange来监听className的变化(想了解更多,请看《JS魔法堂:DOM世界的观察者》)

function polyfillClassList(el){
  var r = /\s+/, cls = el.className, _inner  =  cls ? cls.trim().split(r) : [];
  var listener = function(e){
    if (e.propertyName !== 'className') return void 0;

    var cLst = el.classList, oLen = _inner.length, cls=  el.className;
    _inner  =  cls ? cls.trim().split(r) : [];
    var len = (cLst.length = _inner.length);
    for (var i = 0, maxLen = Math.max(oLen, len); i < maxLen; ++i){
       if (i < len){
           cLst[i] = _inner[i])
       } else {
           delete cLst[i];
       }
    }    
  };
  el.attachEvent('onpropertychange', listener);
  el.classList = {
     length: _inner.length,
     item: function(index){
        return _inner[index] || null;
     },
     add: function(cls){
       // 省略检查cls值是否有效的代码
       if (this.contains(cls)) return void 0;
  
       el.detachEvent('onpropertychange',  listener);
       el.className += ' ' + cls;
       _inner.push(cls);
       this[this.length++] = cls;
       el.attachEvent('onpropertychage', listener);
     },
     remove: function(cls){
       // 省略检查cls值是否有效的代码
       if (!this.contains(cls)) return void 0;

       el.detachEvent('onpropertychange',  listener);
       el.className = el.className.replace(new RegExp('\\b' + cls + '\\b', 'i'), '').trim();
       _inner.splice(_inner.indexOf(cls), 1);
       --this.length;
       el.attachEvent('onpropertychage', listener);
     },
     toggle: function(cls){
       // 省略检查cls值是否有效的代码
       this[this.contains(cls) ? 'remove' : 'add'](cls);
     },
     contains: function(cls){
       // 省略检查cls值是否有效的代码
       return el.className.search(new RegExp('\\b' + cls + '\\b', 'i')) >= 0;
     },
     toString: function(){
       return _inner.toString();
     }
  };  

  // 初始化classList[{Number} 索引]获取Attr元素
  for (var i = 0, len = _inner.length; i < len; ++i ){
    el.classList[i] = _inner[i];
  }
}        

由于当原生的add、remove、contains和toggle方法的入参值包含空格时,会抛出InvalidCharacterError,因此在polyfill时也要做相应的检查和抛出异常

// 模拟InvalidCharacterError类
var InvalidCharacterError =  function(msg){
   this.code = 5;
   this.message = msg;
   this.name = 'InvalidCharacterError';
};
InvalidCharacterError.prototype = DOMException;


// 检查入参并抛异常
// @param {String} methodName add、remove等方法名
// @param {String} cls css类
var check = function(methodName, cls){
  var msgTpl = ["Failed to execute '", , "' on 'DOMTokenList': The token provided ('", ,"') contains HTML space characters, which are not valid in tokens."];
  if (/\s+/.test(cls)){
     throw new InvalidCharacterError((msgTpl[1] = methodName, msgTpl[3] = cls, msgTpl).join(''));
  }
};

   更多关于异常处理、Error和Exception的信息请留意《JS魔法堂:异常处理并不那么简单》

十一、DOMStringMap类型——HTML5新特性dataset的类型哦!  

  IE11开始支持 HTML5 JS API的dataset,它是就专门用来操作自定义特性(custom attribute,属性的分类请看《JS魔法堂:特性、属性,傻傻分不清楚》)的对象,其类型为DOMStringMap,从名称可知其为字符串字典。下面结合dataset说明其特点吧,具体如下:

  ①. dataset针对以"data-"开头的自定义特性操作;

  ②. 通过形如dataset.rawData获取data-raw-data的属性值;

  ③. 通过形如dataset.rawData = 'hello world!'给data-raw-data的属性赋值;

  ④. 通过形如delete dataset.rawData删除属性data-raw-data;

  ⑤. 通过for in 遍历dataset的属性;

  ⑥. 属性值必须或将自动转换为String类型;

  ⑦. 其实它就是除了setAttribute、getAttribute等操作自定义特性的另一个接口而已,而且效率比get/setAttribute低,但大大简化操作代码。

  另外,JQuery中也有一个data函数,那么它跟以"data-"开头的自定义特性有什么关联呢?

html:<div id="div" data-raw="raw"></div>,使用jquery-1.10.2

        var $el = $('#div'), el = $el[0]; 

        function log(){
            console.log($el.data('raw'));
            console.log(el.dataset['raw']);
            console.log(el.outerHTML);
        }
        log();
     // 输出:
     // raw
     // raw
        // <div id="div" data-raw="raw"></div>

        $el.data('raw', '$');
        log();
        $el.data('raw', 'raw');
     // 输出:
     // $
     // raw
     // <div id="div" data-raw="raw"></div>


        el.dataset.raw = 'dataset';
        log();
        el.dataset.raw = 'raw';
     // 输出:
     // raw
     // dataset
     // <div id="div" data-raw="dataset"></div>


        delete el.dataset.raw;
        log();
        // 输出:
        // raw
        // undefined
        // <div id="div"></div>

        el.dataset.newRaw = 'newRaw';
        console.log($el.data('newRaw')); // 输出newRaw

  从上面的实例可知:

    调用JQuery的data函数访问属性时,它会在库内部的特性映射表中寻找同属性名的键值对,没有则采取与dataset相同的方式获取属性值,若成功则将在特性映射表中新建一个键值对,然后后续的访问和赋值操作均仅仅针对该键值对。赋值操作时,仅仅在特性映射表中新建键值对,并不会赋值到标签对应的"data-*"特性中。

    为何JQuery要设计成这样呢?因为dataset的自定义特性值必须为String类型,赋予其他类型时会发生隐式类型转换,不便于暂存对象、数组等数据。JQuery这种算是折中的做法吧,所以用JQuery的data API操作自定义特性时最好不要跟dataset或get/setAttribute等原生API混合用咯。

  本节参考:《HTML5自定义属性对象Dataset 简介

十二、 总结                              

   其实DOM的集合又何止上述的这些呢,在后续的日子里我会边学习边完善本文的,谢谢收看!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

JS基础(下)

事件DOM Event 更多事件请查询h3c htmldom参考手册 event onclick() :当点击时 onfocus() :获得焦点时 ;当...

49870
来自专栏Golang语言社区

Go 语言简介(上)— 语法

Hello World package main //声明本文件的package名 import "fmt" //import语言的fmt库——用于输出 f...

40780
来自专栏Python爱好者

Python高效编程(一)

23490
来自专栏Python爬虫实战

Python数据类型之字符串

字符串就是一系列的字符。Python中,用配对的引号括起来的都是字符串,其中引号可以是单引号也可以是双引号:

9120
来自专栏个人分享

XML编程知识点总结

DOM的全称是Document Object Model,也即文档对象模型。基于DOM的XML分析器将一个XML文档转换成一个对象模型的集合,应用程序挣是通过...

8520
来自专栏阮一峰的网络日志

async 函数的含义和用法

本文是《深入掌握 ECMAScript 6 异步编程》系列文章的最后一篇。 Generator函数的含义与用法 Thunk函数的含义与用法 co函数库的含义...

28660
来自专栏企鹅号快讯

一文快入VBA——一个VBA数据处理小程序的解析

这是我自己写的一个VBA处理的小程序,它极大地帮助我提高了数据处理的速度,现在我把它分享给你。个人觉得如果能够看看该程序,ExcelVBA使用的基本问题就不是比...

30170
来自专栏Pythonista

Python3编程技巧

Microsoft Excel是Microsoft为使用Windows和Apple Macintosh操作系统的计算机编写的一款电子表格软件。直观的界面、出色的...

11220
来自专栏IMWeb前端团队

20个例子入门Q.js

本文希望通过20个简单的例子让没用过Q.js的同学快速掌握其基本用法 1. 新建实例 html代码: <div id="demo" q-text="msg"><...

32170
来自专栏Nian糕的私人厨房

JavaScript 基础

JavaScript 是一种轻量级,解释型的,有着函数优先 (First-class Function) 的编程语言,虽然它是作为开发 WEB 页面的脚本语言而...

12850

扫码关注云+社区

领取腾讯云代金券