DOM Enlightenment

Chapter 5. Element Node Geometry and Scrolling Geometry

5.1 Element Node Size, Offsets, and Scrolling Overview

DOM nodes are parsed and painted into visual shapes when viewing HTML documents in a web browser. Nodes, mostly element nodes, have a corresponding visual representation made viewable/visual by browsers. To inspect and in some cases manipulate the visual representation and geometry of nodes programmatically, a set of APIs exist and are specified in the CSSOM View Module. A subset of methods and properties found in this specification provide an API to determine the geometry (i.e., size and position using offset) of element nodes as well as hooks for manipulating scrollable nodes and getting values of scrolled nodes. This chapter breaks down these methods and properties.

Note

Most of the properties (excluding scrollLeft and scrollTop) from the CSSOM View Module specification are read-only and calculated each time they are accessed. In other words, the values are live.

5.2 Getting an Element’s offsetTop and offsetLeft Values Relative to the offsetParent

Using the properties offsetTop and offsetLeft, we can get the offset pixel value of an element node from the offsetParent. These element node properties give us the distance in pixels from an element’s outside top and left borders to the inside top and left borders of the offsetParent. The value of the offsetParent is determined by searching the nearest ancestor elements for an element that has a CSS position value not equal to ...