Jun 04

看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:

©panhezeng for 阿潘道, 2006-2018. 原文地址:http://apsay.com/?p=578
本文遵循署名-非商业性使用共享协议,转载请注明。

Leave a Reply