Allen Day’s Blog

Hopefully the keywords I’m using here will help the next poor soul who has to learn this part of the Mozilla API. I needed to find where in the window some elements were. This information is not contained in the usual DOM referred to via the document variable. There are actually two parallel DOMs: the Content DOM (the usual one) and the Layout DOM. The Layout DOM’s structure contains all the elements in the Content DOM, but has positional information available to you as BoxObject (Firefox 2.*) or BoundingClientRect (Firefox 3.*) objects. Read the XUL Box Object Tutorial

Here’s how you get the boxes. For the sake of example, we’ll refer to the first

Firefox 2.*:

tab = document.getElementsByTagName("table").item(0);
tabBox = document.getBoxObjectFor(tab);
//tabBox.x
//tabBox.y
//tabBox.width
//tabBox.height

the x, y attributes give the location of the upper-left corner of the element, relative to the browser window. width, height tell you the size of the element.

Firefox 3.*:

tab = document.getElementsByTagName("table").item(0);
tabBox = document.getBoundingClientRect(tab);
//tabBox.left
//tabBox.top
//tabBox.width
//tabBox.height

The left, top attributes are equivalent to the Firefox 2.* x, y attributes, and width, height have identical meaning.

These docs helped me piece this together:
http://developer.mozilla.org/en/docs/DOM:element.getBoundingClientRect
http://developer.mozilla.org/en/docs/XUL_Tutorial:Box_Objects

Some good stuff on MouseEvents I’m stashing here for my own reference:
http://developer.mozilla.org/samples/domref/dispatchEvent.html
http://blog.stchur.com/blogcode/event-rerouting/

Image borrowed from Mozilla’s Layout Engine by L. David Baron