Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

如何理解Range和Selection对象? #140

Open
FrankKai opened this issue Apr 16, 2019 · 2 comments
Open

如何理解Range和Selection对象? #140

FrankKai opened this issue Apr 16, 2019 · 2 comments
Labels

Comments

@FrankKai
Copy link
Owner

FrankKai commented Apr 16, 2019

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

  • Selection
  • Range
    image
@FrankKai
Copy link
Owner Author

FrankKai commented Apr 16, 2019

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
Copy link
Owner Author

FrankKai commented Apr 17, 2019

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。
    image

  • 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的结束位置。

@FrankKai FrankKai added the HTML label Mar 9, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant