关于获取子节点中的first|last等api探究

写于2012-4-2 清明假期的第一天 | @****

 

前言：

 

      本文探究的是tangram中处理父节点寻找子节点中第一个（first）元素 | 最后一个（last）元素，以及子节点中的前一个（prev）元素 | 后一个（next）元素。

 

正文：

 

在tangram的api设计中，抽离了一个接口式的api。

 

 

/*
*_matchNode 分类出来的一个公用的api---从目标元素指定的方向去找对应元素*
*@function*
*@param {String} direction -- 遍历的方向 previousSibling | nextSibling*
*@param {String} start -- 遍历开始的位置 firstChild | lastChild | previousSibling | nextSibling*
*/
ZYC.dom._matchNode = function(element,direction,start){
    element = ZYC.dom.g(element);
	for(var node = element[start];node;node=node[direction]){
	   if(node.nodeType == 1){
	      return node;
	   }
	}
};

 

1、first -- 获取子元素中的第一个元素节点

 

    思路其实就是循环从元素的firstChild开始， 遍历的方向是nextSibling

 

 

 

ZYC.dom.first = function(element){
    return ZYC.dom._matchNode(element,'nextSibling','firstChild');
};

 

2、last -- 获取子元素中的最后一个元素节点

 

    思路其实就是循环从元素的lastChild开始， 遍历的方向是previousSibling

 

 

ZYC.dom.last = function(element){
    return ZYC.dom._matchNode(element,'previousSibling','lastChild');
};

 

3、prev -- 获取前一个元素节点

 

   思路其实就是循环从该元素的previousSibling开始， 遍历的方向是previousSibling

 

 

ZYC.dom.prev = function(element){
    return ZYC.dom._matchNode(element,'previousSibling','previousSibling');
};

 

4、next -- 获取后一个元素节点

 

  思路其实就是循环从该元素的nextSibling开始， 遍历的方向是nextSibling

 

 

ZYC.dom.next = function(element){
    return ZYC.dom._matchNode(element,'nextSibling','nextSibling');
};