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

最新推荐文章于 2024-05-28 08:30:09 发布

最新推荐文章于 2024-05-28 08:30:09 发布 · 116 阅读

文章标签：

#prev #netx #first #last

本文介绍Tangram框架中DOM操作的核心方法，包括如何选取元素的第一个子节点、最后一个子节点、前一个兄弟节点及后一个兄弟节点。通过这些方法，开发者可以更灵活地进行DOM树的遍历。

写于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');
};