Element 接口的 getClientRects() 方法返回 DOMRect 对象的集合，这些对象指示客户端中每个 CSS 边框框的边界矩形。

大多数元素每个只有一个边框，但多行内联元素（例如多行 <span> 元素，默认情况下）在每一行周围都有一个边框。

调用语法：

let rectCollection = object.getClientRects();

返回值是 DOMRect 对象的集合，每个与元素关联的 CSS 边框框都有一个。每个 DOMRect 对象都包含只读的 left、top、right 和 bottom 属性，以像素为单位描述边框框，左上角相对于视口的左上角。对于带有标题的表格，即使标题位于表格的边框之外，也会包含标题。 当在除外部 <svg> 之外的 SVG 元素上调用时，生成的矩形相对于“视口”是元素的外部 <svg> 建立的视口（并且要清楚，矩形也由 external-<svg> 的 viewBox 变换，如果有的话）。

最初，Microsoft 打算使用此方法为每行文本返回一个 TextRectangle 对象。但是，CSSOM 工作草案指定它为每个边框框返回一个 DOMRect。对于内联元素，这两个定义是相同的。但是对于块元素，Mozilla 将只返回一个矩形。

计算矩形时会考虑视口区域（或任何其他可滚动元素）的滚动量。

返回的矩形不包括任何可能发生溢出的子元素的边界。

对于 HTML <area> 元素、自身不呈现任何内容的 SVG 元素、display:none 元素以及通常不直接呈现的任何元素，将返回一个空列表。

即使对于具有空边框框的 CSS 框，也会返回矩形。左、上、右和下坐标仍然有意义。

小数像素偏移是可能的。

这里的例子可以参考mdn官网的例子

这个例子列举了三种情况：

1、p标签里面有span,然后再不同元素上画rect的情况

2、ol里面有li元素，同样在不同元素上画rect的情况

3、table里面有caption,然后在不同元素画rect的情况