2.3.5 引用 DOM 元素

jQuery() 函数能够直接接受 HTML 字符串，并把它们转换为 DOM 结构，这是上一节中所讲解的利用 jQuery() 函数生成 DOM 元素。当然，我们也可以看到 jQuery() 函数还可以接收 DOM 元素、DOM元素集合、HTML标签或者 ID 值。下面我们就来分析 jQuery.fn.init() 构造器是如何把这些类型的参数转换为 DOM 元素的。

对于 HTML 标签来说，它使用 document.getElementsByTagName() 方法获取 DOM 元素集合。对于 ID 参数来说，它使用 document.getElementById() 方法获取特定的 DOM 元素。另外，还可以使用 DOM 元素的 childNodes、firstChild、lastChild、nextSibling、parentNode 和 previousSibling 的属性引用 DOM 节点。

既然说 DOM 元素能够通过 lastChild、parentNode 等属性引用节点，jQuery 对象又是 DOM 元素的集合，因此，jQuery 就可以考虑通过整合 DOM 元素的这些属性来获得其集合中所有元素各自引用的节点。把这些间接引用的节点组合起来又构成了新的 DOM 元素集合。下面我们就来分析 jQuery 是如何引用节点的。

[html]view
plain

//通过each()方法为jQuery对象映射一组引用DOM节点的方法

jQuery.each({

parent:function(elem){returnelem.parentNode;},//引用父节点

parents:function(elem){returnjQuery.dir(elem,"parentNode");},//引用所有父节点

next:function(elem){returnjQuery.nth(elem,2,"nextSibling");},//引用相邻的下一个DOM元素

prev:function(elem){returnjQuery.nth(elem,2,"previousSibling");},//引用相邻的上一个DOM元素

nextAll:function(elem){returnjQuery.dir(elem,"nextSibling");},//引用所有后继DOM元素

prevAll:function(elem){returnjQuery.dir(elem,"previousSibling");},//引用所有前继DOM元素

sibling:function(elem){returnjQuery.sibling(elem.parentNode.firstChild,elem);},//引用相邻DOM元素

children:function(elem){returnjQuery.sibling(elem.firstChild);},//引用所有子元素

//如果存在iframe，则就是文档，或者所有子节点

//elem.contentDocument||elem.contentWindow.documentiframe的属性

//http://devoloper.mozilla.org/on/docs/XUL:iframe

contents:function(elem){returnjQuery.nodeName(elem,"iframe")?elem.contentDocument||

elem.contentWindow.document:jQuery.makeArray(elem.childNodes);}

},function(name,fn){

//为jQuery对象注册同名方法

jQuery.fn[name]=function(selector){

//每个元素都执行同名方法

//过滤元素集

if(selector&&typeofselector=="string")

//返回构建的jQuery对象

returnthis.pushStack(jQuery.unique(ret),name,selector);

};

});

在上面的代码中，为 jQuery 对象绑定了一组方法，这些方法能够引用不同位置的节点，主要包括父节点、子节点和兄弟节点三类。

jQuery 通过 jQuery.each() 公共函数把这个节点引用的方法注册到 jQuery.fn 原型对象中，即 jQuery 对象的同名方法中。因为 jQuery 对象的 DOM 元素是一个集合，所以就必须对集合中每个 DOM 元素执行相同的操作，也就是说为每个 DOM 元素调用属性包含的函数，如 parent: function(elem){return elem.parentNode;}; 中的 function(elem){return elem.parentNode;} 。

当然，在引用的节点中，还包括很多重复的 DOM 元素，或者用户需要过滤的其他节点，这些操作都需要利用过滤函数进行过滤，关于这个话题将在 CSS 选择器一节中进行详细的讲解。

在上面定义的 jQuery 对象方法中，jQuery 也提供了几个公共函数： jQuery.dir()、jQuery.nth() 和 jQuery.sibling() 来辅助完成引用 DOM 节点。下面我们来分析这几个公共函数的用法。

[html]view
plain

//从一个元素出发，检索某个方向上的所有元素

//如可以把元素的parentNode、nextSibling、previousSibling、lastChild、firstChild属性作为方向

//参数说明：

//elem参数表示起点元素

//dir参数表示元素的方向属性，如parentNode、nextSibling、previousSibling、lastChild、firstChild

//逐级迭代访问，直到访问到document节点

while(cur&&cur!=document){

if(cur.nodeType==1)//Element类型

matched.push(cur);

}

returnmatched;

};

dir 是 direction(方向) 一词的缩写，表示朝一个方向一直迭代到尽头。例如，parentNode 能够把父节点作为当前节点，再取其父节点，通过这种方式可以迭代到 document 对象为止。另外，对于 nextSibling、previousSibling、lastChild 和 firstChild 元素属性都具有方向性，因此只要获取元素具有
dir (方向) 特性的属性，就可以反复迭代读取。每循环一次都会把取到的元素保存起来。

所以说，dir() 函数对于检索 DOM 文档树中呈放射线性排列的元素来说，是非常有用的。但是如果要检索在某个方向上的第几个元素，如检索偶数序号位置的元素，就需要使用 nth() 函数。该函数的源代码如下所示。