图片 2

javascript常用方法

 

childNodes属性返回的是一个NodeList对象,是一个节点的集合,可包含元素节点及其它节点,在DOM中,节点的类型总共有12种,通过判断节点的nodeType来判断节点的类型。

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

我们在操作DOM的时候经常会和childNodes和children打交道,那么这2个属性究竟有什么区别呢?今天就来总结一下:

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

我们经常使用的2种方式会返回一个NodeList对象,一种是Node.childNodes,另一种是
document.querySelectorAll()。注意:querySelectorAll方法返回的是一个静态的(static)对象,只包含元素节点,下面会解释动态和静态的区别。

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

在Chrome50+版本,NodeList对象的原型上多增加了好几个方法,Node.entries()、Node.forEach()、Node.keys()、Node.values(),有兴趣的可以自己研究一下,这里就不详细深入了。

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

这两个对象的原型上都有一个item()方法,传入索引就能获取相对应的的子节点,但是HTMLCollection对象多了一个namedItem()方法,
参数是string,传入元素的id或者name属性,返回具有指定 id 或 name
属性的元素或节点。如果 HTMLCollection 中没有这样的节点,则返回 null。



图片 1


无论是NodeList或者HTMLCollection都是动态的(live),除了querySelectorAll()这个奇葩,那什么是动态什么又是静态呢?

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

children属性返回的是一个HTMLCollection对象,是元素节点的集合,有很多属性返回的都是HTMLCollection对象,常用的有document.getElementsByXXX,
Node.children, document.images,document.forms等。

ps:

从上图可以看到,我动态的给ul插入一个新创建的li,无论是NodeList或者HTMLCollection都不需要再次获取就能实时的改变,这就是动态性(live),而querySelectorAll()获取的NodeList反而没有变化,这就是静态(static)。

结语:我们平常写代码时用的最多的就是children属性,childNodes还要判断节点类型,太过于麻烦,毕竟一般情况下我们都只想获取元素节点。别忘了document.querySelector()这个奇葩,返回的是一个NodeList对象,但只包含元素节点,而且还是静态的。

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

图片 2

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

您可能感兴趣的文章:

  • 在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种方式示例

 

 


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

 微软MSDN上查到的 NodeList实现 ,虽然这些资料告诉我们 NodeList继承了 Microsoft.SpeechServer.Dom.Collections.Collection Class . 但是事实却并不如此. 事实上,ie浏览器的NodeList不具备 ICollection接口定义的 namedItem 和 tags 两个方法.  实现了他们的 只有HTMLCollection类型.
此文档是 Speech Server 2007 用的,所以应该仅供参考.只能说明IE浏览器中的NodeList 还是遵守标准的.
public sealed class NodeList : Collection, INodeList, IEnumerable, IExpando, IReflect
NodeList的继承链:
System.Object      

  Microsoft.SpeechServer.Dom.Shim
    Microsoft.SpeechServer.Dom.DynamicShim 
      Microsoft.SpeechServer.Dom.Collections.Collection 
            Microsoft.SpeechServer.Dom.Collections.NodeList


Collection 实现的ICollection接口定义的属性和方法表

public properties : item(msdn上说item是重载,我表示诧异…),length
public methods    : item,namedItem,tags

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


 神秘的 StaticNodeList  

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

ps:

 

微软的一些相关:

 

关于namedNodeMap https://developer.mozilla.org/En/DOM/NamedNodeMap , 

总结:

  NodeList** 接口定义**

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

Members Table