龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

nextSibling 与 getNextElement(node)详解

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
nextSibing:下一个节点,节点类型可以是任何一种,其中就有文本节点。 2.得到下一个元素节点: function getNextElement(node) { //声明getNextElement函数,参数为node节点。 if(node.nodeType == 1) { //如
nextSibing:下一个节点,节点类型可以是任何一种,其中就有文本节点。

2.得到下一个元素节点:

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]的下一个兄弟节点了,哈哈,豁然开朗。


Note: These functions also walk up the DOM tree, so if you have two lists and call getNextElement on the last list-item in the first list it will return the first item of the second list.


getNextElement(id);

Returns the next element, regardless of type, after id.

getNextElement(id, 'li');

Returns the next list item, after id; could potentially be a child of id.

getNextElement(id, 1);

Returns the next element with a nodeType of 1.

getNextElement(id, 'li', false);

Returns the next list-item that resides on the same level, or higher, as id; no child nodes are searched.

Practical example:
<div id="popup">
    <h1>This is a popup</h1>
    <p id="paragraph">Below are some options:</p>
    <ul id="list">
        <li>Your first choice</li>
        <li id="secondItem">Your second choice</li>
    </ul>
</div>
getNextElement('popup');

Would most likely return whitespace.

getNextElement('popup', 1);

Would return the H1 tag.

getNextElement('paragraph', 'li');

Would return the first list-item, “Your first choice”.

getPreviousElement('secondItem', 'ul');

Would return the UL element.

getPreviousElement('paragraph', 1);

Would return the paragraph element.

getFirstChild & getLastChild
Once again, both these functions take the same parameters and behave the same way so I’ll only provide examples for one.

getFirstChild(id);

Returns the first child of id, regardless of type.

getFirstChild(id, 'li');

Returns the first child of id that is a list-item.

getFirstChild(id, 1);

Returns the first child of id that has a nodeType of 1.

Practical example:
<div id="popup">
    <h1>This is a popup</h1>
    <p>Below are some options:</p>
    <ul>
        <li>Your first choice</li>
        <li>Your second choice</li>
    </ul>
</div>
getFirstChild('popup');

Would most likely return a Text node with some whitespace.

getFirstChild('popup', 1);

Would return the H1 element.

getFirstChild('popup', 'li');

Would return the first list-item, “Your first choice”.

getLastChild('popup');

Once again, probably whitespace.

getLastChild('popup', 1);

Would return the UL element.

getLastChild('popup', 'li');

Would return the last list-item, “Your second choice”.

getNextParent & getPreviousParent
Again, both these functions take the same parameters, so I’ll only show one.

getNextParent(id);

Returns the node next to the parent of id.

Practical example:
<ul>
    <li id="first">Item One</li>
</ul>
<ul>
    <li id="second">Item Two</li>
</ul>
getNextParent('first');

Would return the second UL element.

getPreviousParent('second');

Would return the first UL element.

isType
isType(id, 'li');

Returns true if id has a tagName of ‘li’.

isType(id, 3);


收藏文章
表情删除后不可恢复,是否删除
取消
确定
图片正在上传,请稍后...
评论内容为空!
还没有评论,快来抢沙发吧!

热评话题

按钮 内容不能为空!
立刻说两句吧! 查看0条评论
精彩图集

赞助商链接