Given An X,y Coordinate, I Need To Find All Html Elements Underneath It

I am building an app where I repeatedly need to get lists of html elements sitting under a specific location (x,y relative to the viewport, e.g.). I am considering the following a

Solution 1:

You might be looking for the elementFromPoint method that exists in MSIE, FF3+ and in some form in Safari and Opera. It may be also worth taking a look at getBoundingClientRect. Combine the two and you should be in business.

You might also be able to speed up approach #1 by keeping the calculated structure between lookups and only recalculate it when changes actually occur on the page. Take a look at how selector engines (Sizzle in paticular) cache their lookups and expires the cache when the DOM changes.

It may seem contrived, but calculating every element's position is what drag-and-drop handlers have been doing up until now. There are a dozen free ones out there that have this stuff properly optimized (my hunch is that YUI's will have the most readable code). These may be dated though or trying to support browsers that you don't want/need to.