javascript

Chapter 11: DOM Levels 2 and 3
(continued)
}
document.body.appendChild(temp);
arguments.callee.offset = -temp.getBoundingClientRect().top -
scrollTop;
document.body.removeChild(temp);
temp = null;
var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;
return {
left: rect.left + offset,
right: rect.right + offset,
top: rect.top + offset,
bottom: rect.bottom + offset
};
} else {
var actualLeft = getElementLeft(element);
var actualTop = getElementTop(element);
}
}
return {
left: actualLeft - scrollLeft,
right: actualLeft + element.offsetWidth - scrollLeft,
top: actualTop - scrollTop,
bottom: actualTop + element.offsetHeight - scrollTop
}
This function uses the native getBoundingClientRect() method when it ’ s available and defaults to
calculating the dimensions when it is not. There are some instances where the values will vary in
browsers, such as with layouts that use tables or scrolling elements.
Prior to Firefox 3, a method called getBoxObjectFor() was available. This method
originated in XUL and leaked into the web browser due to its location in the class
hierarchy. It is recommended that you avoid using this method in web development.
Traversals
The DOM Level 2 Traversal and Range module defines two types that aid in sequential traversal of a
DOM structure. These types, NodeIterator and TreeWalker , perform depth - first traversals of a DOM
structure given a certain starting point. These object types are available in DOM - compliant browsers,
including Firefox 1 and later, Safari 1.3 and later, Opera 7.6 and later, and Chrome 0.2 and later. There is
no support for DOM traversals in IE. You can test for DOM Level 2 Traversal support using the
following code:
342