通常坐标多数是用来处理交互时的鼠标位置，其实使用坐标还可以进行元素选择与获取内容偏移量。

介绍与坐标相关的几个冷门API: elementFromPoint()、caretPositionFromPoint()等。

通过坐标选择元素

elementFromPoint() && elementsFromPoint()

在下面这个交互示例中，点击灰色矩形，再点击颜色按钮改变它的背景色，可以尝试点击其他元素后再设置颜色试试。

此处是通过坐标位置选择的矩形，而不是通过该监听元素事件或其他属性选择器。elementFromPoint()会基于当前可视区域的坐标(clientX, clientY)选择指定坐标位置最顶层的元素。

通过坐标获取该位置的节点及节点内容偏移量

caretPositionFromPoint()

点击文本中的任意一处，看看会发生什么：

这里将caretPositionFromPoint()与鼠标事件联系起来进行演示。

通过鼠标事件取得了光标的位置坐标，将位置传给API会得到一个CaretPosition对象，该对象包含光标所处的Node及其在Node内容中的偏移量，这个Node可以是textNode也可以是elementNode，在使用时可以根据场景进行相关操作。在本例中通过偏移量将文本元素根据光标所在位置进行了截断，创建了新的Node节点。

与选区相关的还有Range与Selection，一句话介绍就是：两者均用于文档中的选区操作，前者为包含边界节点对数据的对象，后者是前者的集合，可以通过**window.getSelection()**得到当前文档中的所有选区range对象。

看看下面这个示例：拖拽一段文本，观察选区的起始与终止的容器与内容索引。（注意：尝试正向和反向拖拽，看看有什么不同）

两者的具体属性可以参考文档，上面示例中的方向差异是因为Selection的方向性：Selection的选区具有正向、反向和无向（通过range的boundary point判断）。若为正向，则锚点为range的起始node，焦点为终止node。若为反向，则焦点为range的起始node，锚点为终止node。