getClientRects()
获取元素的所有矩形区域 - 适用于多行文本
方法说明
getClientRects() 返回元素的多个矩形区域，主要用于多行文本或跨多个盒模型的元素。
const rects = element.getClientRects();
// 返回 DOMRectList 集合
// 遍历所有矩形
for (let i = 0; i < rects.length; i++) {
console.log(rects[i]);
}💡 与 getBoundingClientRect() 的区别
getBoundingClientRect() 返回的是元素的边界矩形（一个），而
getClientRects() 返回的是所有组成该元素的矩形（多个）。
示例 1：单行元素 vs 多行元素
对比单行和多行元素返回的矩形数量
单行文本
单行元素
矩形数量:
0
这是多行文本示例，它会换行显示多个矩形
多行元素
矩形数量:
0
每个矩形的高度:
-
示例 2：选中文本的矩形
获取选中文本的矩形区域（高亮效果）
选中这段文字的任意部分，我会显示选中文本的矩形区域。getClientRects() 可以精确获取每个选区的位置，这对于实现自定义高亮或其他交互效果非常有用。
选区信息
矩形数量:
-
选区总宽度:
-
💡 实际应用
这个功能常用于实现自定义的文本高亮、标注、评论等功能。比如 Medium 的评论功能就使用了类似的 API。
示例 3：内联元素
内联元素可能产生多个矩形
这是一个跨行显示的内联元素示例，当内联元素跨越多行时，每行都会产生一个独立的矩形区域。
内联元素
矩形数量:
-
总结
- getClientRects() 返回多个矩形（DOMRectList）
- 主要用于多行文本、内联元素等场景
- 与 getBoundingClientRect() 配合使用可以获得更精确的位置信息
- 常用于文本高亮、选区检测等高级功能