如何理解Range和Selection对象？

[FrankKai]

在开发富文本编辑器“光标位置处插入表情”功能时，用到了一个很关键的window.getSelection().getRangeAt(0)用来记录光标的位置，这里涉及到两个很关键的对象：

• Selection
• Range

[FrankKai]

Selection

• Selection对象代表了用户选中的文字的range，或者是当前插入符号（光标）的位置。
• 通常使用window.getSelection()获得用来检查和修改的Selection对象。
• 如果是选择一段文字的话，anchor是用户开始selection的点；focus是用户结束selection的点。
• 如果是用鼠标的话，anchor是鼠标按下的点；focus是鼠标松开的点。
• anchor是锚点，focus是焦点，不要混淆这两个点。

属性

• anchorNode 锚点节点元素。
• anchorOffset 锚点偏移量。文本节点或者元素情况不同，一个返回字符数字，一个返回childNodes的索引。
• focusNode 选择结束的焦点元素。
• focusOffset 焦点偏移量。文本节点或者元素情况不同，一个返回字符数字，一个返回childNodes的索引。
• isCollapsed 返回一个代表起点终点是否在同一位置的布尔值。
• rangeCount 返回一个选择区的数字。
• type 返回一个代表当前选择元素的DOMString。

方法

• getRangeAt(index) 一般来说是0，因为大多数情况用户每次只选择一个范围，即使是跨Node也是一个Range

[FrankKai]

Range

• Range对象代表了文档的一个片段fragment，这个片段包含了nodes或者是nodes的一部分。
• 可以通过document.createRange()新建一个Range对象。
• 可以通过selection.getRangeAt()或者document.caretRangeFromPoint查询到Range对象。

属性

• collapsed 返回起点与终点是否在同一位置的布尔值。
• commonAncestorContainer 返回包含了startContainer和endContainer节点的最深的Node。
• endContainer 返回Range结束的Node。
• endOffset 返回Range结束的代表endContainer的数字。
• startContainer 返回Range开始的节点。
• startOffset 返回Range开始的代表startContainer的数字。

方法

• insertNode()

• selectNode(node) 当前node的父节点作为range的startContainer和endContainer。

• collapse(toStart) 折叠，传true折叠到Range的起点；传false折叠到Range的终点。调用selectNode()后collapsed是true，不调用是false。

• createContextualFragment(tagString) 创建DOM片段。这个方法会把range起点当作上下文节点，调用HTML fragment 解析算法或者XML语法解析算法，tagString包含了文本和标签然后把它转换成文档的片段。

• setStart(startNode, startOffset)设置一次选择的Range的起点，可以是NodeList也可以是textNode。

• setEnd(endNode, endOffset)设置一次选择的Range的终点，可以是NodeList也可以是textNode。

• setStartAfter() 设置Range相对于Node的开始位置。

• setEndAfter() 设置Range相对于另一个Node的结束位置。