diff --git a/files/en-us/web/api/domrectlist/index.md b/files/en-us/web/api/domrectlist/index.md new file mode 100644 index 000000000000000..cb0621e63c61602 --- /dev/null +++ b/files/en-us/web/api/domrectlist/index.md @@ -0,0 +1,35 @@ +--- +title: DOMRectList +slug: Web/API/DOMRectList +page-type: web-api-interface +browser-compat: api.DOMRectList +--- + +{{APIRef("Geometry Interfaces")}} + +The **`DOMRectList`** interface represents a collection of {{domxref("DOMRect")}} objects, typically used to hold the rectangles associated with a particular element, like bounding boxes returned by methods such as {{domxref("Element.getClientRects", "getClientRects()")}}. It provides access to each rectangle in the list via its index, along with a `length` property that indicates the total number of rectangles in the list. + +> **Note**: `DOMRectList` exists for compatibility with legacy Web content and is not recommended to be used when creating new APIs. + +## Instance properties + +- {{domxref("DOMRectList.length")}} {{ReadOnlyInline}} + - : A read-only property that returns the total number of {{domxref("DOMRect")}} objects in the `DOMRectList`. + +## Instance methods + +- {{domxref("DOMRectList.item")}} + - : Returns the {{domxref("DOMRect")}} object at the specified index. If the `index` is out of range, it returns `null`. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("DOMRect")}} +- {{domxref("DOMRectReadOnly")}} diff --git a/files/en-us/web/api/domrectlist/item/index.md b/files/en-us/web/api/domrectlist/item/index.md new file mode 100644 index 000000000000000..bb9b5d513b8fa33 --- /dev/null +++ b/files/en-us/web/api/domrectlist/item/index.md @@ -0,0 +1,46 @@ +--- +title: "DOMRectList: item() method" +short-title: item() +slug: Web/API/DOMRectList/item +page-type: web-api-instance-method +browser-compat: api.DOMRectList.item +--- + +{{APIRef("Geometry Interfaces")}} + +The {{domxref("DOMRectList")}} method +`item()` returns the {{domxref("DOMRect")}} at the specified index within the list, or `null` if the index is out of range. + +## Syntax + +```js-nolint +rectList.item(index) +``` + +### Parameters + +- index + - : A zero-based integer representing the position of the `DOMRect` in the `DOMRectList` to retrieve. + +### Return value + +A {{domxref("DOMRect")}} object at the specified index in the `DOMRectList`, or null if index is greater than or equal to the number of rectangles in the list. + +## Example + +```js +const rects = document.getElementById("rects").getClientRects(); +console.log(rects.length); // Number of rectangles in the DOMRectList + +if (rects.length > 0) { + console.log(rects.item(0)); // Logs the first DOMRect object +} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/domrectlist/length/index.md b/files/en-us/web/api/domrectlist/length/index.md new file mode 100644 index 000000000000000..7f9e2048fc2944d --- /dev/null +++ b/files/en-us/web/api/domrectlist/length/index.md @@ -0,0 +1,48 @@ +--- +title: "DOMRectList: length property" +short-title: length +slug: Web/API/DOMRectList/length +page-type: web-api-instance-property +browser-compat: api.DOMRectList.length +--- + +{{APIRef("Geometry Interfaces")}} + +The read-only **`length`** property of the {{domxref("DOMRectList")}} interface returns the number of {{domxref("DOMRect")}} objects in the list. + +## Value + +A positive integer representing the count of `DOMRect` objects in the `DOMRectList`. If there are no rectangles in the list, `length` is `0`. + +## Examples + +In the following example, we retrieve the list of rectangles for a {{htmlelement("div")}} element using {{domxref("Element.getClientRects()")}}. We then display the number of rectangles in the list within another `