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

在您开始本文的阅读前,我强烈建议您可以先读一读此篇: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);
}

对于 HTMLCollection集合对象 必须要说一说的是 namedItem方法. 看看规范的解释.

上文中粗体部分很重要,没有这个作为指导的话.后面遇到的一些问题就很不好确定孰是孰非.因为众多浏览器的实现并不一样.

  NodeList 接口定义

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

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

NodeList的继承链:

ps:

1. 目前只有Opera的NodeList Class 是派生自 Collection Class 或HtmlCollection Class 的.所以此浏览器中NodeList集合对象也会具备 HTMLCollection接口实现的所有属性和方法.

2. MS 的ICollection 接口 定义了一个tags方法 用来根据tagName获取元素集合.其类型为 HTMLCollection 类型

 神秘的 StaticNodeList  

interface NodeSelector {
    Element   querySelector(in DOMString selectors);
    NodeList  querySelectorAll(in DOMString selectors);
  }

 

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

由于w3.org的[DOM-LEVEL-3-CORE]文档中,并没有StaticNodeList接口的定义. 只好在后面找出一份微软的代替之.

微软的一些相关:

基于 NodeList Class 是个密封类. 我们可以初步了解StaticNodeList 并不像最初我认为的那样,可能派生自NodeList. 而且规范说的明白. 这个集合是静态的.就是说它不会随着DOM树的变化而变化. 这种选择性去除基类能力的做法不符合继承的思想.所以只可能是另外的一个东东了.

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

结果:

注0: 非IE 且支持 querySelectorAll 的浏览器返回的集合对象应该也叫StaticNodeList .但不知是否因规范中定义querySelectorAll方法返回类型为NodeList类型. 

       但规范中有注解这个NodeList 必须为静态的对象.即不随着DOM Tree的改变而改变, 其自身的改变也不应该影响到DOM Tree.那么他就不该再叫NodeList类型.

注1: Chrome中 直接打印document.all,会得到undefined . 但是并不影响我们对document.all的访问和使用.

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

注2: Safari4中并不叫HTMLAllCollection 而只是 HTMLCollection

注3:Opera、Safari等浏览器中.也可以直接访问document.all , 但是 typeof document.all =='undefined'  以及 if(document.all){//此处逻辑永远不会被执行.}.但可以直接打印document.all



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

ps:

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

.不要奇怪为什么列表中没有window.frames,因为实际上window.frames在ie6,ie7,ie8(ie9已修改,所以同其他浏览器一样.)以外的浏览器中,就是window对象,即window === window.frames. ie6,7,8中大概window.frames是window对象的一个浅表复制. 所以实际上,要获取一个iframe,我们只需要 window[index||name]即可.

总结:

虽然看起来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符合的元素.

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索NodeList
HTMLCollection
javascript nodelist、舰队collection浏览器、uc浏览器javascript、浏览器启用javascript、谷歌浏览器javascript，以便于您获取更多的相关知识。