MDN Feature pages for DOMRectList (#36703)

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")}}

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}}

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 `<div>` element on the page.
+
+First, the HTML:
+
+```html
+<div id="box" style="width: 50px; height: 20px; border: 1px solid black;"></div>
+<div id="output"></div>
+```
+
+Now the JavaScript:
+
+```js
+const box = document.getElementById("box");
+const rects = box.getClientRects();
+const output = document.getElementById("output");
+
+output.textContent = `Number of rectangles: ${rects.length}`;
+```
+
+The output looks like this:
+
+{{ EmbedLiveSample('Examples', '100%', 60) }}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}