看Jeremy Keith写的DOM Scripting，碰到第一个坎是在9.3.1节关于获取下一个元素节点那个函数。 一直很疑惑，到网上搜了一下关键字getNextElement，还真发现也有和我一样的朋友，基本没有很好解答，可能高手都不屑于这种幼稚问题吧。
最近正好有个项目，页面有个地方需要切换显示功能，原来这种事我都扔给程序员了，这次新来的技术总监，让我写，晕死呀，只好现学现卖，结合从DOM Scripting学习体会，理了理思绪。哈哈，终于被我写好啦。 同时，我也看懂了getNextElement函数，下面是我写的注释，比较繁琐，我是菜鸟嘛。
getNextElement.js

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

 
其实这个函数本身不是很难理解，唯一有些难的可能就是return getNextElement(node.nextSibling);，但就算不懂递归，也能猜到意思。 最关键的地方其实是， if(node.nodeType == 1)。因为这个例子，是让我们用nextSibling得到下一个元素节点，而nextSibling得到是下一个节点，有可能不是元素节点，于是就需要getNextElement函数了。 问题就在这，我的误解是，if(node.nodeType == 1)应该写成if(node.nextSibling.nodeType == 1)才对呀。 看了前面的调用我才想通了，var elem = getNextElement(headers[i].nextSibling);，也就是说，其实这个函数function getNextElement(node) 这里的node已经是headers[i]的下一个兄弟节点了，哈哈，豁然开朗。

written by panhezeng \\ tags: JavaScript