DOM新特性之caretPositionFromPoint API
💡
原文中文，约2400字，阅读约需6分钟。
📝
内容提要
caretPositionFromPoint是一个新特性，可以根据光标位置返回对应元素的位置信息，适用于分词和分句。该方法自Chrome 128版本起支持，Safari尚不支持。
🎯
关键要点
- caretPositionFromPoint是一个新特性，可以根据光标位置返回对应元素的位置信息。
- 该方法自Chrome 128版本起支持，Safari尚不支持。
- caretPositionFromPoint()方法返回节点及其偏移、尺寸等信息，而elementsFromPoint()方法返回元素。
- 该特性主要用于分词和分句的交互场景。
- 语法为const range = document.caretPositionFromPoint(x, y, options);
- options参数支持shadowRoots属性，可以返回shadow DOM中定义的节点的插入符号位置。
- 提供了一个使用案例，通过点击元素实现文本中断。
- 建议开发者了解该特性，但日常开发中需求较少。
❓
延伸问答
caretPositionFromPoint API 的主要功能是什么？
caretPositionFromPoint API 可以根据光标位置返回对应元素的位置信息，主要用于分词和分句的交互场景。
该API从哪个版本的Chrome开始支持？
caretPositionFromPoint API 从Chrome 128版本开始支持。
caretPositionFromPoint和elementsFromPoint有什么区别？
caretPositionFromPoint返回节点及其偏移、尺寸等信息，而elementsFromPoint返回元素。
如何使用caretPositionFromPoint API？
使用语法为 const range = document.caretPositionFromPoint(x, y, options); 其中x和y是坐标值，options是可选参数。
caretPositionFromPoint API的options参数有什么作用？
options参数支持shadowRoots属性，可以返回shadow DOM中定义的节点的插入符号位置。
在什么场景下使用caretPositionFromPoint API比较合适？
该API主要适用于需要精确控制文本分词和分句的交互场景，例如制作视频封面时的文字中断。
➡️
