一個很全面的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.

轉載于:https://www.cnblogs.com/crowley/p/3592771.html

總結

以上是生活随笔為你收集整理的html Selection的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。