Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Chapter 4 ■ HTML and JavaScript
while(parentElm.className != "dynamic")
{
parentElm = parentElm.parentNode;
}
However, this loop will end in an "TypeError: Cannot read property 'className' of null" error when there
is no element with the right class. If you tell the loop to stop at the body, you can avoid that error:
var myLinkItem = document.getElementById('linkedItem');
var parentElm = myLinkItem.parentNode;
while(!parentElm.className != 'dynamic'&& parentElm != document.body')
{
parentElm=parentElm.parentNode;
}
alert(parentElm);
Among Siblings
The family analogy continues with siblings, which are elements on the same level. (They don’t come in
different genders like brothers or sisters, though.) You can reach a different child node on the same level via the
previousSibling and nextSibling properties of a node. Let’s go back to our list example:
List Item 1
List Item 2
Linked List Item
List Item 4
You can reach the link via getElementById() and the LI containing the link via parentNode. The properties
previousSibling and nextSibling allow you to get List Item 2 and List Item 3, respectively:
var myLinkItem = document.getElementById("linkedItem");
var listItem = myLinkItem.parentNode;
var nextListItem = myLinkItem.nextSibling;
var prevListItem = myLinkItem.previousSibling;
If the current object is the last child of the parent element, nextSibling will be undefined and cause an error if you
don’t test for it properly. Unlike with childNodes, there are no shortcut properties for the first and last siblings, but you
could write utility methods to find them. For example, suppose you want to find the first and the last LI in our demo HTML:
document.addEventListener("DOMContentLoaded",init,false);
function init()
{
var myLinkItem=document.getElementById("linkedItem");
var first=firstSibling(myLinkItem.parentNode);
var last=lastSibling(myLinkItem.parentNode);
85
www.it-ebooks.info