javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异

在您开始本文的阅读前,我强烈建议您可以先读一读此篇:http://w3help.org/zh-cn/causes/SD9004.


     
     HTMLCollection 接口定义

interface HTMLCollection
{
      readonly attribute unsigned long   length;
      Node               item(in unsigned long index);
      Node               namedItem(in DOMString name);
}

        
  NodeList 接口定义

interface NodeList {
  Node                      item(in unsigned long index);
  readonly attribute  unsigned long        length;
};

public sealed class NodeList : Collection, INodeList, IEnumerable, IExpando, IReflect

NodeList的继承链:

The NodeList object returned by the querySelectorAll() method must be static, not live ([DOM-LEVEL-3-CORE], section 1.1.1)

Members Table

The following table lists the members exposed by the StaticNodeList object.

Attributes/Properties

Property	Description
length	Gets the number of characters in a TextNode object.

Methods

Method	Description
item	Retrieves an object from a childNodes or StaticNodeList collection.

Remarks

The collection will be empty if the querySelectorAll method returned no matches.

If the element tree is changed relative to the one or more original selectors used to generate the StaticNodeList collection, the collection (being static) will not be updated when the element tree changes.

测试:IE,     Firefox3.6,     Chrome10 Dev,     Opera 11,     Safari 5.02
测试主要针对nodeList 和 HTMLCollection, 并不涉及 xpath 以及namedNodeMap.等
关于namedNodeMap https://developer.mozilla.org/En/DOM/NamedNodeMap , http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1780488922
结果:

       Chrome3-浏览器中 仅仅是HTMLCollection,从Chrome4开始才是HTMLAllCollection



注4:Freifox在非标准模式,才支持document.all 且是一个很奇怪的东西.其构造器是Object. 这东西从FireFox 0.8时代貌似就有了.一直到现在的4.0 beta8 ...

ps:
.ie6,7可以参考ie8,测试方式是 使用namedItem 或 tags 两个方法是否被实现来检查其是否为nodeList 还是 HTMLCollection.

总结:
虽然看起来NodeList 和HTMLCollection 的差别仅在于 一个 namedItem 方法. 但这个方法本身也仅仅是在当前集合中 找到name 或 id符合的元素第一个元素出来
为了方便记忆,方便查找.我们应该尽量统一使用索引器代替 item以及namedItem方法. 但应注意 IE,Firefox对NodeList没有实现name索引器.Opera 的nodeList索引器 则可能返回一个NodeList集合(childNodes接口).  考虑到大多数问题出在childNodes接口上.我们紧紧需要铭记.对childNodes接口避免使用索引器即可. 对于querySelectorAll接口,甚至Opera也不支持其返回的NodeList(Static)的name索引器了.那么querySelectorAll的选择器一次性找到符合节点即可. 或者避免使用name索引器,改用 Number Index 索引器来筛选.

关于['name']索引方式应该注意的几个问题是 :
1. IE 又返回一个HTMLCollection集合(IE大概认为如果查找的元素集合中有表单元素,且name可能会出现重复.那么返回值就应该是一个集合.而不是单一元素.),且非表单元素name会被无视.
2.FireFox 和 opera 浏览器会 无视document.compatMode ,无视id或name,无视是否为表单元素,仅找出第一个符合 id或name任意一个为索引或namedItem()参数的元素.
3.webkit浏览器则无视document.compatMode,无视id,无视name,无视是否为表单元素,而仅仅找出id符合的元素.

您可能感兴趣的文章:

• 在javascript将NodeList作为Array数组处理的方法
• js中将HTMLCollection/NodeList/伪数组转换成数组的代码
• javascript 使用 NodeList需要注意的问题
• javascript先序遍历DOM树的方法
• JavaScript简单遍历DOM对象所有属性的实现方法
• javascript 获取HTML DOM父、子、临近节点
• JavaScript 节点操作 以及DOMDocument属性和方法
• javascript获取dom的下一个节点方法
• Js 获取HTML DOM节点元素的方法小结
• JavaScript DOM节点操作方法总结
• 原生JS实现循环Nodelist Dom列表的4种方式示例