《JavaScriptDOM编程艺术》读后感6:细说下getNextElement函数

 2016-06-07 22:49

在书中第9节的讲解里,提到了一个关于获取下一元素节点的函数:getNextElement,因为作者需要提取的不是“下一个节点”,而是“下一个元素节点”。所以就做了这样一个简单的函数。但因为没有辅助说明,所以我一开始很难理解。翻阅了给项属性后终于明白了,分享下。

函数如下:

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

先说说DOM nodeType 属性:它对获取的东西进行了一个判断,一共有12种不同的节点类型,其中类型1就是指的元素节点;

然后我们说说DOM nextSibling 属性:它是指获取物的下一个节点。注意的是,我们要的是元素节点,而nextSibing属性只是获取HTML里面的下一个节点。

明白了这两个判断,那么我们就可以把这个逻辑阅读出来了:

定义了一个函数值:node,当它是一个元素节点的时候就跳转返回这个值。如果不是,比且如果它有下一个节点的时候,就自动跳转回这个函数并重新使用一次。这里作者很简单的用了一个node.nextsibling的判断,这个判断我只能说是node没有下一个值的情况下会返回null,进行而不做if判断,而有值情况下都会进行if循环。最后一个就简单了,不是元素节点,也没有下一个元素节点的话,就跳出返回null。

这个函数确实很巧妙的运用了跳出循环的逻辑,开始读了几遍都没能理解,后来细细想想确实还是蛮巧的。

《JavaScriptDOM编程艺术》读后感:

  1. 初次接触JavaScriptDOM的感觉
  2. 第六章,一个常规事件的逻辑
  3. 3个方法来改变DOM结构树
  4. 在元素前后插入元素
  5. 培养function的逻辑思维
  6. 细说下getNextElement函数
  7. 动画方法moveElement()
  8. 实战中的global.js
  9. 整站练习(附源文件)
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: