学习笔记本：getNextElement与nextSibling的疑惑

 

function getNextElement(node)
{
    if(node.nodeType == 1)
    {
        return node;
    }
    if(node.nextSibling)
    {
        return getNextElement(node.nextSibling);
    }
    return null;
}

 

 

下面是各个语句的解释：

function getNextElement(node)//声明getNextElement函数，参数为node节点
{
	if(node.nodeType == 1)
	{
		return node;//如果node节点类型值与1相等为真，即node节点为元素节点，则退出此函数，并此函数取值为node。
	}//如果node节点类型值与1相等为假，则继续执行下面语句。
	if(node.nextSibling)//如果node节点的下一个兄弟节点存在即条件为真，则退出此函数，并递归，参数变为node节点的下一个兄弟节点。
	{
		return getNextElement(node.nextSibling);//从一个函数的内部调用这个函数本身叫作递归调用。
	}//如果node节点的下一个兄弟节点不存在即条件为假，则继续执行下面语句。
	return null;//退出此函数，并此函数取值为null。
}

　　

 nextSibling是获取当前节点的下一个节点。

在看javascript DOM编程艺术第九课的时候，对获取当前元素的下一个元素节点有点疑惑，也就是getNextElement函数。

网上搜了一下，看到上面那段话的解释 ，在看var elem = getNextElement(headers[i].nextSibling);的时候，就豁然开朗了。。

这个函数第一个检测，headers[i]的下一个节点（nextSibling），如果是上元素节点就返回这个，并结束函数，由于html中有空格或者换行符，不一定就是元素节点。

否则，继续下一个if语句，如果headers[i].nextSibling不是元素节点，那就下一个节点的下一个节点。headers[i].nextSibling.nextSibling。。。

就是这个意思，哈哈，哦也也，哦啦啦。。。