zoukankan      html  css  js  c++  java
  • 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.
    有了方向,朝着这个方向坚持的走下去,会看到海洋
  • 相关阅读:
    ugui优化
    jmeter请求时json串的输入格式
    Python文件读写之r+/w+/a+
    python文件操作
    python列表操作
    python嵌套字典的用法
    python字典的基础操作
    python字符串操作
    python基础之字符串为空或空格判断
    【转】Charles手机抓包设置&无法打开火狐网页设置
  • 原文地址:https://www.cnblogs.com/crowley/p/3592771.html
Copyright © 2011-2022 走看看