关于获取子节点中的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');
};

相关推荐