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 InputTextArea 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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。