当前位置：首页 > 资讯 > 技术文档

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

时间：2020-12-27 22:46 编辑：来源：阅读：
扫一扫，手机访问

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

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

[b] [/b]

[b] HTMLCollection 接口定义[/b] interface HTMLCollection { readonly attribute unsigned long length; Node [b]item[/b](in unsigned long index); Node [b]namedItem[/b](in DOMString name); }

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

[b]原文[/b]: namedItem method This method retrieves a Node using a name. With [HTML 4.01] documents, it first searches for a Node with a matching id attribute. If it doesn't find one, it then searches for a Node with a matching name attribute, but only on those elements that are allowed a name attribute. With [XHTML 1.0] documents, this method only searches for Nodes with a matching id attribute. This method is case insensitive in HTML documents and case sensitive in XHTML documents.

[b]翻译:[/b]

namedItem 方法:

此方法获通过 "name"属性来获取节点.

[b]在HTML4.01文档中,它首先搜索的是节点的ID属性的值. 如果没找到匹配节点,才去搜索name 属性与之匹配的节点. 即HTML4.01 DTD下,浏览器们应该优先通过ID来获取节点.其次才是name.[/b]

[b]在XHTML 1.0文档中,则仅搜索ID与之匹配的节点.[/b]

对于节点(id or name)属性的值,此方法在HTML文档中忽略大小写区别,而在XHTML文档中.则要区别大小写.

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

[b]NodeList[/b][b] 接口定义[/b]

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

[b] [/b]

[b] 微软MSDN上查到的 NodeList实现 ,虽然这些资料告诉我们 NodeList继承了 [/b][b]Microsoft.SpeechServer.Dom.Collections.Collection Class . 但是事实却并不如此. 事实上,ie浏览器的NodeList不具备 ICollection接口定义的 namedItem 和 tags 两个方法. 实现了他们的只有HTMLCollection类型.[/b]

[b]此文档是 Speech Server 2007 用的,所以应该仅供参考.只能说明IE浏览器中的NodeList 还是遵守标准的. [/b]

[b]public sealed class NodeList : Collection, INodeList, IEnumerable, IExpando, IReflect[/b]

[b]NodeList的继承链:[/b]

[b]System.Object [/b]

　　Microsoft.SpeechServer.Dom.Shim

[b]　　　　Microsoft.SpeechServer.Dom.DynamicShim [/b]

[b]　　　　　　Microsoft.SpeechServer.Dom.Collections.Collection [/b]

[b] [/b] 　　　　　　[b]Microsoft.SpeechServer.Dom.Collections.NodeList[/b]

[b] [/b]

[b]Collection 实现的ICollection接口定义的属性和方法表[/b]

[b] [/b]

[b]public properties : item(msdn上说item是重载,我表示诧异...),length[/b]

[b]public methods : item,namedItem,tags[/b]

[b] [/b]

ps:

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

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

[b] [/b]

[b] 神秘的 StaticNodeList [/b]

[b] [/b]

interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); } [b]The NodeList object returned by the querySelectorAll() method must be static, not live ([DOM-LEVEL-3-CORE], section 1.1.1)[/b]

[b] [/b]

[b]由于w3.org的[/b][b][url=http://www.w3.org/TR/selectors-api/#DOM-LEVEL-3-CORE][DOM-LEVEL-3-CORE[/url]][/b][b]文档中,并没有StaticNodeList接口的定义. 只好在后面找出一份微软的代替之.[/b]

[b]微软的一些相关:[/b]

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

[b]Members Table[/b] [quote]

The following table lists the members exposed by the [b]StaticNodeList[/b] object.

Attributes/Properties

Property	Description
[url=http://msdn.microsoft.com/en-us/library/ms534103(v=VS.85).aspx]length[/url]	Gets the number of characters in a [url=http://msdn.microsoft.com/en-us/library/ms535905(v=VS.85).aspx]TextNode[/url] object.

Methods

Method	Description
[url=http://msdn.microsoft.com/en-us/library/ms536609(v=VS.85).aspx]item[/url]	Retrieves an object from a [url=http://msdn.microsoft.com/en-us/library/ms537445(v=VS.85).aspx]childNodes[/url] or [b]StaticNodeList[/b] collection.

[/quote] [b]Remarks[/b] [quote] The collection will be empty if the [b]querySelectorAll[/b] method returned no matches.

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

[/quote]

[b]测试:IE,[/b] [b]Firefox3.6,[/b] [b]Chrome10 Dev,[/b] [b]Opera 11,[/b] [b]Safari 5.02[/b]

测试主要针对nodeList 和 HTMLCollection, 并不涉及 xpath 以及namedNodeMap.等

关于namedNodeMap [url=https://developer.mozilla.org/En/DOM/NamedNodeMap]https://developer.mozilla.org/En/DOM/NamedNodeMap[/url] , http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1780488922

[b]结果:[/b]

[b]限定方[/b]	[b]方法\浏览器[/b]	[b]IE8[/b]	[b]IE9 beta7930.16406[/b]	[b]FireFox4.0 beta7[/b]	[b]Chrome10.0 Dev[/b]	[b]Safari5.02[/b]	[b]Opear11[/b]
W3C DOM2	[b]getElementsByTagName[/b]	HTMLCollection	HTMLCollection	HTMLCollection	NodeList	NodeList	NodeList
WHATWG HTML5	[b]getElementsByClassName[/b]	HTMLCollection	HTMLCollection	HTMLCollection	NodeList	NodeList	NodeList
W3C DOM1	[b]getElementsByName[/b]	HTMLCollection	HTMLCollection	HTMLCollection	NodeList	NodeList	NodeList
W3c Selectors API 1	[b]querySelectorAll[/b]	[b]StaticNodeList[/b]	[b]StaticNodeList[/b]	NodeList(Static)[b](注0)[/b]	NodeList(Static)	NodeList(Static)	NodeList(Static)
W3C DOM1	[b]childNodes[/b]	NodeList	NodeList	NodeList	NodeList	NodeList	NodeList
MS	[b]children[/b]	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	[b]document.links[/b]	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	[b]document.images[/b]	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	[b]document.anchors[/b]	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	[b]document.forms[/b]	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	[b]document.applets[/b]	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	[b]formElement.elements[/b]	HTMLFormElement	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	[b]selectElement.options[/b]	HTMLSelectElement	HTMLSelectElement	HTMLOptionsCollection	HTMLOptionsCollection	HTMLOptionsCollection	HTMLOptionsCollection
w3c DOM1	[b]tableElement.rows[/b]	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
w3c DOM1	[b]rowElement.cells[/b]	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection	HTMLCollection
MS	[b]document.all[/b]	HTMLCollection	HTMLCollection	(S)-[b](注4)[/b] (Q)object HTML document.all class	HTMLAllCollection[b](注1)[/b]	HTMLAllCollection[b](注2)[/b]	HTMLCollection[b](注3)[/b]

注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]即可.

[b]总结:[/b]

虽然看起来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 索引器来筛选.

[b]关于['name']索引方式应该注意的几个问题是 :[/b]

1. IE 又返回一个HTMLCollection集合(IE大概认为如果查找的元素集合中有表单元素,且name可能会出现重复.那么返回值就应该是一个集合.而不是单一元素.),且非表单元素name会被无视.

2.FireFox 和 opera 浏览器会无视document.compatMode ,无视id或name,无视是否为表单元素,仅找出第一个符合 id或name任意一个为索引或namedItem()参数的元素.

3.webkit浏览器则无视document.compatMode,无视id,无视name,无视是否为表单元素,而仅仅找出id符合的元素.

全部评论(0)

上一篇：JavaScript 点击页面上的按纽，弹出层，背景变灰
下一篇：js实现固定显示区域内自动缩放图片的方法

资讯排行榜
更多>>