James Gregory

This is a very old post. Please, stop reading and just download jQuery.

As I said I would be in my previous post, I’ve been working on improving getNextElement. I’ve improved the overall performance of the function and also created a few others with similar purpose; including the sister function getPrevious element. I outline all the functions and their uses below; you can find the download link at the top and bottom of this post.

Any bugs anyone finds don’t fret to email me or post a comment here, i’ll work on fixing them asap.

The Functions

getNextElement & getPreviousElement

Basically this function is a more advanced, flexible version of the “element.nextSibling” and “element.previousSibling” properties. Features include the ability to specify the next element you’e looking for explicitly, so you can return the next list-item in a list (even if it happens to be a child of the current element) or the next matching node type. Also recursion is toggleable.

getFirstChild & getLastChild

A core part of getNextElement/getPreviousElement, this function recursively searches an elements child nodes for a matching element. Can be used stand alone to only return from within an elements child structure; recursively parses the childNode structures of all child elements.

getNextParent & getPreviousParent

Gets the next node in the DOM tree after the current nodes parent; this walks the DOM tree backwards until it finds a parent of the current node with a nextSibling/previousSibling present.

isType

Detects whether a specified element is of correct type; compares against a numerical value (nodeType) or a string value (tagName).

The Examples

Note: All functions that require an element as a parameter can either take a direct reference or a string ID value.

getNextElement & getPreviousElement

Both functions take exactly the same parameters and are used in the same way, so I’ll only provide examples for one.

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);

Returns true if id has a nodeType of 3.

Download: domnavigation-1.1.js (this download is no longer available, sorry)