简单的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;

}
原文地址:https://www.cnblogs.com/nianshi/p/1451294.html