Selection对象

    xiaoxiao2025-06-10  55

    被选择文本示例代码: 

    <p>发大幅<strong>大大泡泡糖</strong>度那附近那<strong>小头爸爸</strong>多好撒节点是的是</p>

    以下几个属性和方法兼容性良好,而且对文本和输入框都有效。

    var selObj = window.getSelection(); // 获取跟选择范围有关的信息 var selRange = selObj.getRangeAt(0); // 返回选中的文本 var selectedText = selObj.toString(); // 返回聚焦元素 var active = document.activeElement;

    锚点是用户开始选择的位置,焦点是用户选择结束的位置。如果使用桌面鼠标进行选择,则锚点是按下鼠标按钮的位置,焦点是释放鼠标按钮的位置。锚点和焦点不应与选择的开始和结束位置混淆。

    一、Selection属性

    1. Selection.anchorNode

        返回选择的锚点的节点。如果文档中从未存在选择,则返回null。

    2. Selection.anchorOffset

        返回一个数字,表示选择的锚点的偏移量。如果anchorNode是文本节点,则这是锚点之前的anchorNode中的字符数。如果anchorNode是一个元素,则这是锚点之前的anchorNode的子节点数。

    3. Selection.focusNode

        返回选择的焦点的节点。如果文档中从未存在选择,则返回null。

    4. Selection.focusOffset

        返回一个数字,表示选择的焦点的偏移量。如果focusNode是文本节点,则这是焦点之前的focusNode中的字符数。如果focusNode是一个元素,则这是焦点之前的focusNode的子节点数。

    5. Selection.isCollapsed

        返回一个布尔值,表示锚点和焦点是否位于同一位置。

    6. Selection.rangeCount

        返回选择中的范围数。

    7. Selection.type

        返回当前选择的类型(Range,Caret 等)。

    二、Selection方法

    1. Selection.addRange()

        添加选择范围(目前只有Firefox支持多个选择范围)。

    2. Selection.containsNode(node [,partial])

       表示某个节点是否是选择的一部分。

        partial 当设置为true时,节点的一部分是选择的一部分时返回true。当设置为false时,仅在整个节点是选择的一部分时返回true。默认是false。

    3. Selection.deleteFromDocument()

        从文档中删除选择的内容。

    4. Selection.removeRange(range)

        从选择中删除范围。

    5. Selection.removeAllRanges()

        从选择中删除所有范围。别名是 Selection.empty()。

    6. Selection.extend(node [,offset])

        将选区的焦点移动到指定点。

      参数:node - 将移动焦点的节点。

           offset - 焦点移动到node的偏移位置。默认为0(按子节点的数量算)。

    7. Selection.getRangeAt(index)

        返回其中一个选择范围。

    8. Selection.selectAllChildren(parentNode)

        选中指定节点的所有子节点。

    9. Selection.setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset)

        将选择设置为包括两个指定DOM节点的全部或部分以及位于它们之间的任何内容的范围。

    10. Selection.toString()

          返回选中的文本。

     

    参考:https://developer.mozilla.org/en-US/docs/Web/API/Selection

     

     

     

    最新回复(0)