nextSibling 与 getNextElement(node)详解
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);
- 上一篇:js cookie 实现您最近浏览过内容
- 下一篇:获取body标签元素方法