html Selection

一个很全面的html dom API https://developer.mozilla.org/en-US/docs/Web/API/Selection

Introduction(简介)

Selection is the class of the object returned by window.getSelection() and other methods. It represents the text selection in the greater page, possibly spanning multiple elements, when the user drags over static text and other parts of the page. For information about text selection in an individual text editing element, see Input, TextArea anddocument.activeElement which typically return the parent object returned fromwindow.getSelection().

selection是通过window.getSelection()或者其他方法返回的一个对象。当用户拖拽了静态文字或者网页的其他部分的时候，它描述了在整个页面的文本选择，很可能跨越了多个dom元素。对于可编辑的元素而言，比如input,textarea,document.activeElement，通过window.getSelection方法，将返回其父对象的Range。

The Range interface represents a fragment of a document that can contain nodes and parts of text nodes in a given document.

A range can be created using the createRange method of the Document object. Range objects can also be retrieved by using the getRangeAt method of the Selection object. 

Range是一个描述包含了dom节点或者部分文本的一个接口对象（我也不知道怎么翻译。。。）。它可以通过document.createRange()方法去创建。另外，它也可以通过window.getSelection().getRangeAt(0)的方式获取。

Glossary（术语）

Other key terms used in this section.

anchor

The anchor of a selection is the beginning point of the selection. When making a selection with a mouse, the anchor is where in the document the mouse button is initially pressed. As the user changes the selection using the mouse or the keyboard, the anchor does not move.

“锚点”是被选择的起始点。当用鼠标做选择时，“锚点”就是鼠标最选择的起始点。当用户改变用鼠标或者键盘改变选择内容的时候，“锚点”不移动。

focus

The focus of a selection is the end point of the selection. When making a selection with a mouse, the focus is where in the document the mouse button is released. As the user changes the selection using the mouse or the keyboard, the focus is the end of the selection that moves.

focus是被选择的终止点。当用户用鼠标做选择时候，focus就是鼠标释放时刻的终止点。当用户用鼠标或者键盘做选择时，focus就是最终移动的位置。

range

A range is a contiguous part of a document. A range can contain entire nodes as well as portions of nodes, such as a portion of a text node. A user will normally only select a single range at a time, but it‘s possible for a user to select multiple ranges (e.g. by using the Control key). A range can be retrieved from a selection as a range object. Range objects can also be created via the DOM and programmatically added or removed from a selection.

Range API

Properties

Range.collapsed Read onlyReturns a Boolean indicating whether the range‘s start and end points are at the same position.如果开始和结束在同一位置，返回true

Range.commonAncestorContainer Read onlyReturns the deepest Node that contains the startContainer and endContainer nodes.返回被继承的容器，它包含了startContainer 和 endContainer 节点。

Range.endContainer Read onlyReturns the Node within which the Range ends.返回Range结尾所在的dom节点。

Range.endOffset Read onlyReturns a number representing where in the endContainer the Range ends.返回一个数字，它描述了在endContainer 中，range的终止位置。

Range.startContainer Read onlyReturns the Node within which the Range starts.返回了Range开始所在的dom节点。

Range.startOffset Read onlyReturns a number representing where in the startContainer the Range starts.返回一个数字，它描述了在startContainer 中，range的起始位置。

Methods

Range.setStart()Sets the start position of a Range.

Range.setEnd()Sets the end position of a Range.

Range.setStartBefore()Sets the start position of a Range relative to another Node.

Range.setStartAfter()Sets the start position of a Range relative to another Node.

Range.setEndBefore()Sets the end position of a Range relative to another Node.

Range.setEndAfter()Sets the end position of a Range relative to another Node.

Range.selectNode()Sets the Range to contain the Node and its contents.

Range.selectNodeContents()Sets the Range to contain the contents of a Node.

Range.collapse()Collapses the Range to one of its boundary points.

Range.cloneContents()Returns a DocumentFragment copying the nodes of a Range.

Range.deleteContents()Removes the contents of a Range from the Document.

Range.extractContents()Moves contents of a Range from the document tree into a DocumentFragment.

Range.insertNode()Insert a Node at the start of a Range.

Range.surroundContents()Moves content of a Range into a new Node

Range.compareBoundaryPoints()Compares the boundary points of the Range with another one.

Range.cloneRange()Returns a Range object with boundary points identical to the cloned Range.

Range.detach()Releases the Range from use to improve performance.

Range.toString()Returns the text of the Range.

Selection API

Properties

anchorNode

Returns the node in which the selection begins.

anchorOffset

Returns a number representing the offset of the selection‘s anchor within the anchorNode. If anchorNode is a text node, this is the number of characters within anchorNode preceding the anchor. If anchorNode is an element, this is the number of child nodes of the anchorNode preceding the anchor.

focusNode

Returns the node in which the selection ends.

focusOffset

Returns a number representing the offset of the selection‘s anchor within the focusNode. If focusNode is a text node, this is the number of characters within focusNode preceding the focus. If focusNode is an element, this is the number of child nodes of the focusNode preceding the focus.

isCollapsed

Returns a Boolean indicating whether the selection‘s start and end points are at the same position.

rangeCount

Returns the number of ranges in the selection.

Methods

getRangeAt

Returns a range object representing one of the ranges currently selected.

collapse

Collapses the current selection to a single point.

extend

Moves the focus of the selection to a specified point.

modify

Changes the current selection.

collapseToStart

Collapses the selection to the start of the first range in the selection.

collapseToEnd

Collapses the selection to the end of the last range in the selection.

selectAllChildren

Adds all the children of the specified node to the selection.

addRange

A range object that will be added to the selection.

removeRange

Removes a range from the selection.

removeAllRanges

Removes all ranges from the selection.

deleteFromDocument

Deletes the selection‘s content from the document.

selectionLanguageChange

Modifies the cursor Bidi level after a change in keyboard direction.

toString

Returns a string currently being represented by the selection object, i.e. the currently selected text.

containsNode

Indicates if a certain node is part of the selection.

html Selection,古老的榕树,5-wow.com