解锁文本编辑用例：highlightsFromPoint及其他FromPoint API

我们很高兴宣布在Microsoft Edge 140及其他基于Chromium的浏览器中推出highlightsFromPoint()方法，这是对CSS自定义高亮API的一个有用补充，使得在给定x、y坐标处查找现有高亮成为可能。

在CSS中绘制高亮

CSS自定义高亮API允许您高亮任意文本范围，而无需向DOM添加新元素。该API通过在JavaScript中创建Range对象，使用CSS.highlights注册表注册这些范围，然后在CSS中使用::highlight()伪元素来高亮范围：

该API非常适合对不需要或不能存在于DOM中的文本范围进行动态样式设置，这在客户端文本编辑器中很常见。

以下截图显示了使用CSS自定义高亮API创建的不同类型高亮（参见实时演示）：

介绍highlightsFromPoint()

从Edge 140开始，我们为这个拼图添加了另一块：CSS.highlights.highlightsFromPoint()方法。这个新方法让您能够检测屏幕上给定x、y坐标位置存在的自定义高亮，从而可以更改高亮的外观或在其周围显示其他UI元素。这使得实现拼写检查、协作编辑、工具提示、上下文菜单或搜索等功能变得更加简单。

CSS.highlights.highlightsFromPoint()可以检测DOM和Shadow DOM中的高亮及其对应的文本范围，而无需编写复杂的命中测试代码。现在，添加交互功能，特别是在处理重叠高亮或Shadow DOM时，具有高性能的实现变得更加容易。

以下截图显示了一个弹出窗口，列出了用户点击的文本范围上应用的三个重叠高亮：

要了解更多信息，请参阅MDN上的HighlightRegistry: highlightsFromPoint()方法，并通过我们的API演示（源代码）查看API的实际应用。

其他*FromPoint API

highlightsFromPoint()方法可能会让您想起其他类似命名的方法：

• document.elementsFromPoint()（及其ShadowRoot等效方法）
• document.elementFromPoint()（及其ShadowRoot等效方法）
• document.caretPositionFromPoint()

与highlightsFromPoint()类似，这些方法也基于屏幕上的x、y坐标提供DOM信息，它们对于用户通过点击或悬停与UI交互的情况非常有用，在这些情况下需要基于位置的检测，而不是使用预设的事件监听器或显式元素引用。

*FromPoint API特别适用于文本编辑场景，但也可用于实现拖放、在特定坐标模拟操作（如在自动化测试或游戏中），以及使工具或扩展能够在不知道元素ID或选择器的情况下识别页面元素。

查看我们的高亮器演示（和源代码），了解如何将caretPositionFromPoint和highlightsFromPoint结合使用，让用户在不创建额外DOM元素的情况下创建和删除文本中的不同高亮。

告诉我们您的想法

我们很想听听您对新的CSS.highlights.highlightsFromPoint() API的反馈，例如它允许您实现的用例、您对未来改进的想法，或者您可能遇到的问题。