getClientRects

The getClientRects() method in JavaScript is used to retrieve a static, read-only list of DOMRect objects. Each DOMRect object represents a rectangle that describes the size and position of a rendered text fragment. This method is particularly useful for measuring the bounding boxes of text elements within the viewport.

When called on an element, getClientRects() returns a NodeList of DOMRect objects. Each DOMRect object has properties like top, bottom, left, right, width, and height, indicating the element's dimensions and its position relative to the viewport. The key distinction between getClientRects() and the more commonly used getBoundingClientRect() is that getClientRects() can return multiple rectangles for a single element. This occurs when an element is split across multiple lines due to text wrapping or when it contains inline elements that also have their own layout boxes.

For example, a long paragraph that wraps to several lines will result in getClientRects() returning a separate DOMRect for each line. Similarly, an element containing multiple inline elements, like `<span>` tags with different styles, might also result in multiple rectangles. If an element does not have any associated layout boxes, or if it is not rendered, getClientRects() returns an empty NodeList.

The information provided by getClientRects() is a snapshot of the element's position and size at the time the method is called. Changes to the layout, such as resizing the window or modifying the content, will affect subsequent calls to getClientRects(). This makes it a dynamic measurement tool for interactive web applications where layout adjustments are common.