理解Selection对象

Selection对象的属性如下：
var selection = window.getSelection();
console.log(selection);
通过上面的代码在控制台查看；

anchorNode: {node} 节点； 包含了用户选取内容的起点的节点。
anchorOffset {int} 整型值： 用户选取内容的起点与anchorNode属性值所返回的节点的起点之间的距离。
focusNode {node} 节点： 包含了用户选取内容的终点的节点。
focusOffset {int} 整型值： 用户选取内容的终点与focusNode属性值所返回的节点终点之间的距离。
isCollapsed {Boolean} 布尔型 当属性值为true，表示用户选取的内容的起点与终点位于相同的位置。
rangeCount {int} 整型值，表示用户选取内容中包含多少个Range对象。

Selection对象的方法
1 理解使用 addRange方法，removeAllRanges方法与removeRange方法。
removeAllRanges： 该方法用于将用户当前选取的所有内容设定为非选取状态，使用方法如下：
selection.removeAllRanges();
下面使用一个demo来理解下该方法的含义，页面上有一个div，div里面有一些文字，还有一个 "取消选取"的按钮，用户选取页面上的一些内容后，单击 "取消选择"按钮时
将会取消对这些内容的选取。代码如下：

<!DOCTYPE html>
 <html>
    <head>
      <meta charset="utf-8">
      <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
      <title>标题</title>
    </head>
    <body>
      <div>adsasddsadsaads</div>
      <button onclick="removeAllRanges()">取消选择</button>
      <button>一般的按钮点击看效果没有反应--对比下</button>
      <script>
        function removeAllRanges() {
          var selection = window.getSelection();
          selection.removeAllRanges();
        }
      </script>
    </body>
 </html>

查看效果

addRange: 该方法用于将一个Range对象添加到Selection对象中，该Range对象中所包含的内容将变为高亮选取状态。
在firefox中：用户可以按住ctrl键的方法同时选取多个不连续区域，因此可以使用selection对象中的addRange方法，在Selection对象中添加多个Range对象。
在chrome，safari及IE9中，一次只能选取一个连续区域，因此只能添加一个Range对象。
使用代码如下：
selection.addRange(rangeObj);
该参数的含义是：需要被添加到Selection对象中的Range对象。
demo如下：页面上有2个div元素，div元素中有一些文字，和一个 "选取第一个文字"的按钮，用户可以通过单击 "选取第一行文字" 按钮来使第一行文字处于高亮选取状态，
页面上还有二个按钮，一个按钮为 "取消选择文字" 和 “选中第一行文字中第二个到第四个文字” 按钮，为了更好的对比，可以查看效果；
代码如下：

<!DOCTYPE html>
   <html>
      <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title>标题</title>
      </head>
      <body>
        <div id="firstLine">第一行文字</div>
        <div>第二行文字</div>
        <button onclick="selectFirstLine()">选择第一行文字</button>
        <button onclick="removeAllRanges()">取消选择文字</button>
        <button onclick="selectContent()">选中第一行文字中第二个到第四个文字</button>
        <script>
          function selectFirstLine() {
            var firstLine = document.getElementById("firstLine");
            var selection = window.getSelection();
            var rangeObj = document.createRange();

            rangeObj.selectNodeContents(firstLine);
            // 所有内容变为非选取状态
            selection.removeAllRanges();

            // 然后自动选取某个区域
            selection.addRange(rangeObj);
          }
          function removeAllRanges() {
            var selection = window.getSelection();
            selection.removeAllRanges();
          }
          function selectContent() {
            var firstLine = document.getElementById("firstLine");
            var textNode = firstLine.firstChild;
            var selection = window.getSelection();
            var rangeObj = document.createRange();
            rangeObj.setStart(textNode, 1);
            rangeObj.setEnd(textNode, 3);

            // 所有内容变为非选取状态
            selection.removeAllRanges();

            // 然后自动选取某个区域
            selection.addRange(rangeObj);
            console.log(selection.toString());  // 打印第二个到第四个文字
          }
        </script>
      </body>
  </html>

查看效果

removeRange: 该方法用于从Selection对象中移除一个指定的Range对象，该Range对象中所包含的内容将从高亮选取状态变为非选取状态。
使用方法如下：
selection.removeRange(rangeObj);
使用方法类似 removeAllRanges()
代码如下：

<!DOCTYPE html>
   <html>
      <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title>标题</title>
      </head>
      <body>
        <div id="firstLine">第一行文字</div>
        <div>第二行文字</div>
        <button onclick="selectFirstLine()">选取第一行文字</button>
        <button onclick="unselect()">取消选择</button>

        <script>
          var rangeObj;
          function selectFirstLine() {
            var firstLine = document.getElementById("firstLine");
            var selection = window.getSelection();
            rangeObj = document.createRange();
            rangeObj.selectNodeContents(firstLine);
            selection.removeAllRanges();
            selection.addRange(rangeObj);
          }
          function unselect() {
            var selection = window.getSelection();
            if (selection.rangeCount > 0) {
              selection.removeRange(rangeObj);
            }
          }
        </script>
      </body>
  </html>

查看效果

2. 理解使用 collapse方法，collapseToStart方法与collapseToEnd方法
collapse: Selection对象的collapse 方法用于将用户当选取范围的起点与终点移动到一个指定位置，使用户选取范围内不包括任何内容。
简单的理解就是不让用户选取内容。
使用方法如下：
selection.collapse(parentNode, num);
参数 parentNode 含义是：指定位置的节点。
参数num的含义是：{int}整型值；
当第一个参数parentNode节点为内容时，该参数值用于指定将第几个文字的结束位置作为collapse方法所使用的指定位置。
当第一个参数parentNode节点中包括其他子节点时，该参数值用于指定将第几个子节点的结束位置作为collapse方法使用的指定位置。

下面是一个demo，页面上有一个div元素有一些文字内容，每次用户用鼠标选取div元素中的文字时，当鼠标左键被松开时使用Selection对象的
collapse方法取消用户选取的文字，使用户永远无法选取div元素中的文字。
代码如下：

<!DOCTYPE html>
     <html>
        <head>
          <meta charset="utf-8">
          <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
          <title>标题</title>
        </head>
        <body>
          <div onmouseup="unSelect()" contenteditable="true" style="width:400px;background-color: #e0f0d0;">adasadsdasdsadsa</div>
          <script>
            function unSelect() {
              var selection = window.getSelection();
              selection.collapse(selection.anchorNode, selection.anchorOffset);
            }
          </script>
        </body>
    </html>

查看效果

collapseToStart：将用户当前选取范围的终点移动到起点，使用户选取范围内不包含任何内容。
该方法和上面的collapse方法还是有区别的，虽然也是不选中任何内容，但是光标的位置变了，选取某一段文字后的终点文字会为作为光标的起点位置；
使用方式如下：
selection.collapseToStart();
下面是一个demo，页面上有一个div元素，包含一些文字，每次用户鼠标选取div元素中的文字时，当鼠标左键被松开时，使用Selection对象的collapseToStart方法
取消用户选取的文字，使用户用于无法选取div元素中的文字，代码如下：

<!DOCTYPE html>
     <html>
        <head>
          <meta charset="utf-8">
          <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
          <title>标题</title>
        </head>
        <body>
          <div onmouseup="unSelect()" contenteditable="true" style="width:400px;background-color: #e0f0d0;">adasadsdasdsadsa</div>
          <script>
            function unSelect() {
              var selection = window.getSelection();
              selection.collapseToStart();
            }
          </script>
        </body>
    </html>

查看效果

collapseToEnd：用于将用户当前选取范围的起点移动到终点处，使用户选取范围内不包括任何内容。
该方法的光标永远在选取的文字的最后。
使用方法如下所示：
selection.collapseToEnd();
下面是一个demo，页面上显示一个div元素，div元素中显示一些文字，每次用户鼠标选取div元素中的文字，当鼠标左键被松开时，使用Selection对象的collapseToEnd方法取消用户选取的文字，使用户永远无法选取div元素中的文字。
代码如下：

<!DOCTYPE html>
     <html>
        <head>
          <meta charset="utf-8">
          <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
          <title>标题</title>
        </head>
        <body>
          <div onmouseup="unSelect()" contenteditable="true" style="width:400px;background-color: #e0f0d0;">adasadsdasdsadsa</div>
          <script>
            function unSelect() {
              var selection = window.getSelection();
              selection.collapseToEnd();
            }
          </script>
        </body>
    </html>

查看效果

3. 理解使用 deleteFromDocument方法
该方法用于将用户选取的内容从页面中删除，使用方法如下所示：
selection.deleteFromDocument();
下面是一个demo，来理解下该方法的使用；页面上有一个div元素，div元素中显示一些文字，每次用户使用鼠标选取div元素中的文字，当鼠标左键被松开时，使用Selection对象的deleteFromDocument方法可以将用户选取的文字从页面中删除。
代码如下所示：

<!DOCTYPE html>
   <html>
      <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title>标题</title>
      </head>
      <body>
        <div onmouseup="removeSelection()" contenteditable="true" style="width:400px;background-color: #e0f0d0;">adasadsdasdsadsa</div>
        <script>
          function removeSelection() {
            var selection = window.getSelection();
            selection.deleteFromDocument();
          }
        </script>
      </body>
  </html>

查看效果

4. 理解使用extend方法
该方法用于将用户选取范围的终点移动到指定位置。
使用方法如下：
selection.extend(focusNode, focusOffset);
参数focusNode代表指定位置所在的节点。
参数focusOffset 为一个整型值；当第一个参数focusNode所代表的节点是文字内容时，该参数值用于指定将第几个文字的结束位置作为用户选取范围的终点。
当第一个参数focusNode所代表节点中包括其他子节点时，该参数值用于指定将第几个子节点的结束位置作为用户选取范围的终点。
下面来看一个demo，演示下该方法的含义：
页面上有一个div元素，该元素内有一些文字，每次用户鼠标选取div元素中的文字，当鼠标左键被松开时，使用selection对象的extend方法将div元素中的剩余文字设定为高亮选取状态。
如下代码：

<!DOCTYPE html>
     <html>
        <head>
          <meta charset="utf-8">
          <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
          <title>标题</title>
        </head>
        <body>
          <div onmouseup="extend()" contenteditable="true" style="width:400px;background-color: red">asdsddsawwwdwassdxcdff</div>
          <script>
            function extend() {
              var selection = window.getSelection();
              if (!selection.isCollapsed) {
                // selection.isCollapsed 当属性值为true，表示用户选取的内容的起点与终点位于相同的位置
                if (selection.focusNode.nodeType == Node.TEXT_NODE) {
                  // 如果选取内容在一个文字节点内
                  var selRange = selection.getRangeAt(0);

                  // 如果用户鼠标反向选取页面内容
                  if (selRange.startContainer == selection.focusNode &&
                    selRange.startOffset == selection.focusOffset) {
                    selection.extend(selection.focusNode, 0);
                  } else {
                    // 如果用户鼠标正向选取页面内容
                    selection.extend(selection.focusNode, selection.focusNode.textContent.length);
                  }
                }
              }
            }
          </script>
        </body>
    </html>

查看效果

5. 理解使用selectAllChildren 方法
该方法用于取消当前用户选取内容，并且选取某个指定元素中的全部子元素。
使用方法如下：
selection.selectAllChildren(element);

如下demo
页面上有一个div元素，div元素中有一些文字，和一个 "选取元素"按钮，用户单击 "选取元素" 按钮时通过selection对象的selectAllChildren方法将div元素中的
全部文字设定为选取状态。

如下代码：

<!DOCTYPE html>
     <html>
        <head>
          <meta charset="utf-8">
          <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
          <title>标题</title>
        </head>
        <body>
          <div id="myDiv">单击“选取元素”按钮将选取div元素中的全部文字</div>
          <button onclick="selectContents()">选取元素</button>
          <script>
            function selectContents() {
              var elementNode = document.getElementById("myDiv");
              var selection = window.getSelection();
              selection.selectAllChildren(elementNode);
            }
          </script>
        </body>
    </html>

查看效果

6. toString方法
该方法和Range对象的toString方法类似，Selection对象的toString方法用于获取用户选取范围内的全部文字内容。使用方法如下：
selection.toString();

请看如下demo，页面上有一个div元素和一个显示内容的按钮，用户单击 显示内容 按钮时 在弹出的提示信息窗口中会显示用户选取的全部文字。如下代码：

<!DOCTYPE html>
     <html>
        <head>
          <meta charset="utf-8">
          <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
          <title>标题</title>
        </head>
        <body>
          <div id="myDiv" style="color: red">adssdsdasdadsadsds</div>
          <button onclick="selectText()">显示内容</button>
          <script>
            function selectText() {
              var selRange = window.getSelection();
              alert(selRange.toString());
            }
          </script>
        </body>
    </html>

查看效果

时间： 2025-01-15 23:24:49

理解Selection对象的相关文章

理解javascript 对象，原型对象、闭包

javascript作为一个面向对象的语言,理解 对象.原型.闭包.模块模式等技术点对于成为一名合格的javascript程序员相当重要,多年没写过blog,今天就先拋个玉,在下基本也不做前端,但颇感兴趣,愿意和大家一起学习.此篇只是对自己认为的比较重要的知识点进行了说明,连贯性不是特别好,大家共同进步. 注意:文中中文并非英文翻译,只是个人理解. 理解面向对象 对象(object) An object is a collection of properties and has a single

深入理解JSON对象

深入理解JSON对象 前面的话 json(javascript object notation)全称是javascript对象表示法,它是一种数据交换的文本格式,而不是一种编程语言,用于读取结构化数据.2001年由Douglas Crockford提出,目的是取代繁琐笨重的XML格式.本文将详细介绍关于json的内容 语法规则 JSON的语法可以表示以下三种类型的值 [1]简单值 简单值使用与JavaScript相同的语法,可以在JSON中表示字符串.数值.布尔值和null 字符串必须使用双引号

【java】理解java对象序列化

关于Java序列化的文章早已是汗牛充栋了,本文是对我个人过往学习,理解及应用Java序列化的一个总结.此文内容涉及Java序列化的基本原理,以及多种方法对序列化形式进行定制.在撰写本文时,既参考了Thinking in Java, Effective Java,JavaWorld,developerWorks中的相关文章和其它网络资料,也加入了自己的实践经验与理解,文.码并茂,希望对大家有所帮助.(2012.02.14最后更新) 1. 什么是Java对象序列化 Java平台允许我们在内存中创建可

深入理解Java对象的创建过程：类的初始化与实例化

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 深入理解Java对象的创建过程:类的初始化与实例化 - Rico's Blogs - 博客频道 - CSDN.NET Rico's Blogs 潜心修炼,成为一个更好的人. 目录视图 摘要视图 订阅 [活动]2017 CSDN博客专栏评选 &nbsp [5月书讯]流畅

理解原型对象

理解原型对象: 创建函数的时候,会为该函数创建一个prototype属性,这个属性指向函数的原型对象.默认情况下所有的原型对象都会获得一个constructor属性,这个属性包含一个指向prototype属性所在函数的指针. 自己的理解,函数是一个对象 ,原型对象也是一个对象,我们在创建函数的时候就会自动为该函数创建一个原型对象,这两个对象怎么关联呢,在创建函数的时候默认就为函数创建了一个属性prototype(其实是指针)这个属性指向原型对象.那么这样函数就和他的原型对象关联起来了.那么这是函

处理Selection对象和Range对象——Word VBA中重要的两个对象

处理Selection对象和Range对象——Word VBA中重要的两个对象 Word 开发人员参考Selection 对象代表窗口或窗格中的当前所选内容.所选内容代表文档中选定(或突出显示)的区域,如果文档中没有选定任何内容,则代表插入点.每个文档窗格只能有一个 Selection 对象,并且在整个应用程序中只能有一个活动的 Selection 对象.说明 可以使用 Selection 属性返回 Selection 对象.如果 Selection 属性未使用对象限定符,则 Microsoft

More Effective C++----(19)理解临时对象的来源

Item M19:理解临时对象的来源 当程序员之间进行交谈时,他们经常把仅仅需要一小段时间的变量称为临时变量.例如在下面这段swap(交换)例程里: template<class T> void swap(T& object1, T& object2) { T temp = object1; object1 = object2; object2 = temp; } 通常把temp叫做临时变量.不过就C++而言,temp根本不是临时变量,它只是一个函数的局部对象.(一切事物皆对象

编辑器开发之 Selection 对象的学习

上一篇,介绍了 range 对象的一些属性和方法,了解了一些基本操作,现在来介绍另外一个重要的对象:selection 对象: MDN 的解释是:Selection 对象表示用户选择的文本范围或插入符号的当前位置.它代表页面中的文本选区,可能横跨多个元素.文本选区由用户拖拽鼠标经过文字而产生: 先来写一个基本的 HTML 结构: 1 <div id="box" class="box" contenteditable="true">ab

kubernetes概述之深入理解pod对象

一.深入理解Pod对象 1.Pod容器的分类 Pod的概念: 最小部署单元 一组容器的集合 一个Pod中的容器共享网络命名空间 Pod是短暂的 Pod的容器分类: Infrastructure Container:基础容器 -- 维护整个Pod的网络空间 一般这里的pause镜像的作用就是维护pod的网络空间 InitContainers:初始化容器 -- 先与业务容器开始执行 Containers:业务容器 -- 并行启动 2.镜像拉取策略 IfNotPresent:默认值,镜像在宿主机上不存