理解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>

查看效果

理解Selection对象的更多相关文章

处理Selection对象和Range对象——Word VBA中重要的两个对象
处理Selection对象和Range对象——Word VBA中重要的两个对象 Word 开发人员参考Selection 对象代表窗口或窗格中的当前所选内容.所选内容代表文档中选定(或突出显示)的区域 ...
w3c标准的selection对象介绍
简介术语属性方法 document.activeElement document.designMode = 'on'; 简介 selection是对当前激活选中区(即高亮文本)进行操作. 在非I ...
彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)
本文同步自我的个人博客: http://mly-zju.github.io/ 众所周知javascript语言的一大特色就是异步,这既是它的优点,同时在某些情况下也带来了一些的问题.最大的问题之一,就 ...
理解javascript 对象，原型对象、闭包
javascript作为一个面向对象的语言,理解对象.原型.闭包.模块模式等技术点对于成为一名合格的javascript程序员相当重要,多年没写过blog,今天就先拋个玉,在下基本也不做前端,但颇感 ...
js对象详解(JavaScript对象深度剖析，深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
编辑器开发之 Selection 对象的学习
上一篇,介绍了 range 对象的一些属性和方法,了解了一些基本操作,现在来介绍另外一个重要的对象:selection 对象: MDN 的解释是:Selection 对象表示用户选择的文本范围或插入符 ...
js selection对象使用方法
IE:document.selection FireFox:window.getSelection() document.selection只有IE支持,window.getSelection()也只 ...
HTML5 Selection对象
一.实例1,设置网页选中内容并且复制到黏贴板 <p id='txtone'>发的FDSAFSDFDS!其实不管哪个行业, <img src='http://beijing.gongj ...
Java基础之深入理解Class对象与反射机制
深入理解Class对象 RRIT及Class对象的概念 RRIT(Run-Time Type Identification)运行时类型识别.在<Thinking in Java>一书第十四 ...

随机推荐

vue项目sql图片动态路径引用问题
最近遇到一个vue动态图片路径的引用问题?明明路径是正确的但是却渲染不出图片!先看我慢慢说来!! 1.当我们把图片的路径放置在data(){return:{}}中的数组中的时候,然后通过v-for循环 ...
sql server:alter database name
--step 1 : 修改数据库名称 USE master GO ALTER DATABASE GeovinDuCms SET SINGLE_USER WITH ROLLBACK IMMEDIATE ...
【读书笔记】iOS-移动开发
一,iPhone 为iPhone编写基于Web的应用程序非常简单.Safari Web浏览器是一款很优秀的工具-它能够完美地对基于Web的应用程序进行缩放,以便在iPhone大小的屏幕上运行.Safa ...
mysql主从复制报错（一主一从）：从库报错Last_SQL_Errno: 1008
配置完主从复制后(一主一从),在从库删了一个测试库,结果在从库上使用show slave status\G查看主从同步状态报如下错误:Last_Errno: 1008,经过排查得知:主从环境删除要先在 ...
loadrunner 脚本开发-参数化之将内容保存为参数、参数数组及参数值获取Part 2
脚本开发-参数化之将内容保存为参数.参数数组及参数值获取 by:授客 QQ:1033553122 ----------------接 Part 1--------------- 把内容保存到参数数组 ...
Fit项目图片上传和云存储的调通
项目中关于动作的说明需要相应的配图,这样可以更直观的说明动作要点.本篇主要为项目中动作的新增和编辑做准备,确定适合场景的上传操作逻辑以及图片的存储和加载的方法. 一上传方案 a) 本来所用的模板中是 ...
JVM、Gc工作机制详解
JVM主要包括四个部分: 类加载器(ClassLoad) 执行引擎内存区: 本地方法接口:类似于jni调本地native方法内存区包括四个部分: 1.方法区:包含了静态变量.常量池.构造函数等 2 ...
理解ES6中的Promise
一.Promise的作用在ajax请求数据的过程中,我们可以异步拿到我们想要的数据,然后在回调中做相应的数据处理. 这样做看上去并没有什么麻烦,但是如果这个时候,我们还需要做另外一个ajax请求,这 ...
python中常用函数整理
1.map map是python内置的高阶函数,它接收一个函数和一个列表,函数依次作用在列表的每个元素上,返回一个可迭代map对象. class map(object): ""&q ...
解决wordpress上传文件出现http错误问题
解决wordpress上传文件出现http错误问题问题现象今天上传约1.4m大小的gif文件到wordpress的媒体库时失败,提示http错误. 原因由于之前一直上传图片都是可以的,所以推测最 ...

理解Selection对象

理解Selection对象的更多相关文章

随机推荐

热门专题