• 【转】 HTMLCollection和NodeList的区别


    1 HTMLCollection类型

    下面的每个项目(以及它们指定的属性)都返回 HTMLCollection(基类)或者它的派生类:
    Document (images, applets, links, forms, anchors)
    form (elements)
    map (areas)
    select (options)
    table (rows, tBodies)
    tableSection (rows)
    row (cells)

    document.forms 是一个 HTMLCollection类型的值
    document还有images, applets, links, forms, anchors也返回HTMLCollection类型

    var links = document.getElementsByTagName('a');//links返回HTMLCollection集合

    属性Properties
    length 只读 表示集合的数量 The number of items in the collection.

    方法Methods
    HTMLCollection.item(index)
    根据数字索引值返回对象
    HTMLCollection.namedItem(name)
    根据name或者id索引值返回对象

    举个例子:
    在Dom中有个表单form元素,它的id是'myForm'
    var elem1, elem2;

    // document.forms is an HTMLCollection

    elem1 = document.forms[0];
    elem2 = document.forms.item(0);

    alert(elem1 === elem2); // shows: "true"

    elem1 = document.forms["myForm"];
    elem2 = document.forms.namedItem("myForm");

    alert(elem1 === elem2); // shows: "true"

    注意
    HTMLCollection 是“活”的;如果基本的文档改变时,那些改变通过所有 HTMLCollection 对象会立即显示出来。

    2 NodeList类型

    概述
    NodeList对象是一个节点的集合,是由Node.childNodes and the querySelectorAll方法返回的.

    属性
    length
    NodeList对象中包含的节点个数.

    方法
    item ( idx )
    返回NodeList对象中指定索引的节点,如果索引越界,则返回null.也可以简写为nodeList[idx].

    描述
    一个"live"集合

    综合:
    document.getElementsByName返回NodeList集合
    var elems = document.getElementsByName('f');
    console.dir(elems)//NodeList[3]

    document.getElementsByTagName 返回HTMLCollection集合
    var links = document.getElementsByTagName('a')
    console.dir(links)//HTMLCollection[102]

    大多数情况下,NodeList对象和HTMLCollection都是个live集合.意思是说,如果文档中的节点树发生变化,则已经存在的NodeList对象也可能会变化.

    var links = document.getElementsByTagName('a');
    // 假如现在links.length === 2.

    document.body.appendChild( links[0].cloneNode(true) ); // 文档中又添加了一个a.
    // 则links这个NodeList对象也会改变.
    // links.length === 3

    但如果该集合是由document.querySelectorAll(或者Element.querySelectorAll)方法返回的, 则它是非live的(就算把页面内的所有节点清空,links.length还等于2).

    判断集合是哪一种的方法:
    1 通过集合是否有namedItem这个方法判断是属于HTMLCollection集合 还是NodeList集合
    2 通过打压其构造函数也可以知道 links.constructor
    3 通过Object.getPrototypeOf(links对象)

    什么NodeList对象没有map和forEach方法?

    NodeList对象在某些方面和数组非常相似,看上去可以直接使用从Array.prototype上继承的方法.然而,这是不可以的.

    JavaScript的继承机制是基于原型的.数组元素之所以有一些数组方法( 比如forEach和map),是因为它的原型链上有这些方法,如下:

    myArray --> Array.prototype --> Object.prototype --> null (想要获取一个对象的原型链,可以连续的调用Object.getPrototypeOf,直到原型链尽头).

    forEach, map这些方式其实是 Array.prototype这个对象的方法.

    和数组不一样, NodeList的原型链是这样的:

    myNodeList --> NodeList.prototype --> Object.prototype --> null

    NodeList.prototype只有一个item方法, 没有Array.prototype上的那些方法, 所以NodeList对象用不了它们.

    原文链接:http://kezhou.sinaapp.com/index.php/archives/40.html

  • 相关阅读:
    学习的成本
    .Net Framework Client Profile 和 .Net Framework的区别[转]
    惆怅的开始
    Android Json解析
    android键盘的Done按钮
    百度地图SDK v2.1.2使用方法
    使用百度地图SDK 这是之前版本 现在的sdk v2-1-2使用方法完全改变
    svn
    Android 图片相关
    Android开发 开启闪光灯 关键代码
  • 原文地址:https://www.cnblogs.com/coder-dumeng/p/5217404.html
Copyright © 2020-2023  润新知