简单的dom遍历

 

    使用纯粹的DOM遍历规则（每个遍历方向都有指针）来开发一些更适合你的HTMLDOM文档遍历函数。大部分Web开发者在大多数情况下仅仅需要遍历DOM 元素而非相邻的文本节点，该规则就是基于这样的事实而制定的。以下一系列的辅助函数可以帮助你，它们能够取代标准的previousSibling、 nextSibling、firstChild、lastChild和parentNode。

下面代码展示的函数，返回的是当前元素的前一个元素，如果前一个元素不存在则是null，类似于元素的previousSibling属性。

function prev( elem ) {

do {

elem = elem.previousSibling;

} while ( elem && elem.nodeType != 1 );

return elem;

}
下面代码展示的函数，返回的是当前元素的下一个元素，如果下一个元素不存在则是null，类似于元素的nextSibling属性。

function next( elem ) {

do {

elem = elem.nextSibling;

} while ( elem && elem.nodeType != 1 );

return elem;

}

下面代码展示的函数，返回的是当前元素的第一个子元素，类似于firstChild元素属性。

function first( elem ) {

elem = elem.firstChild;

return elem && elem.nodeType != 1 ?

next ( elem ) : elem;

}

下面代码展示的函数，返回的是当前元素的最后一个子元素，类似lastChild元素属性。

function last( elem ) {

elem = elem.lastChild;

return elem && elem.nodeType != 1 ?

prev ( elem ) : elem;

}

下面代码展示的函数，返回当前元素的父元素，类似parentNode元素属性。你可以一次用一个数字来操纵多个父元素，例如parent(elem,2)就等同于parent(parent(elem))。

function parent( elem, num ) {

num = num || 1;

for ( var i = 0; i < num; i++ )

if ( elem != null ) elem = elem.parentNode;

return elem;

}