Selection与Range 对象操作示例指南

目录
  • 前言
  • Range
    • 选择部分文本
    • 选择dom元素节点
    • range对象属性
    • 编辑范围的方法
  • Selection
    • selection的属性
    • selection锚点和焦点与range开始结束点的区别

前言

有些时候我们需要能够通过JavaScript访问页面的当前选择，已达成选择（取消选择）部分节点以从文档中删除所选内容或像文档中插入某些新内容。我们需要Range和Selction对象已达成我们的目的。

Range

选择的基本概念是Range，其本质是一对‘边界点’：范围起点和范围终点

我们可以通过Range对象来操作选择

    // 可以不传任何参数创建Range对象
    let range = new Range()

    // 可以通过设置开始和结束边界点来进行选择
    // 指定开始点
    range.setStart(node, offset)
    // 指定最大范围但不包括offset
    range.setEnd(node, offset)

选择部分文本

setStart和setEnd方法的第一个参数node可以是文本节点也可以是元素节点

当node是文本节点时，offset则必须是其文本中的位置

<p id="p">Hello</p>
<script>
let range = new Range();
range.setStart(p.firstChild, 2);
range.setEnd(p.firstChild, 4);
</script>

选择dom元素节点

当node是元素节点时，offset则必须是子元素的索引编号

当我们有如下dom结构并且以p为node节点时，对应的offset如图所示

<p>Test: <i>test1</i> and <b>test2</b> </p>
   | 0   |   1      | 2  |     3     |

range对象属性

我们在上面的示例中创建的 range 对象具有以下属性：

startContainer，startOffset —— 起始节点和偏移量，

endContainer，endOffset —— 结束节点和偏移量，

collapsed —— 布尔值，如果范围在同一点上开始和结束（所以范围内没有内容）则为 true，

commonAncestorContainer —— 在范围内的所有节点中最近的共同祖先节点，

编辑范围的方法

deleteContents() —— 从文档中删除范围中的内容

extractContents() —— 从文档中删除范围中的内容，并将删除的内容作为 DocumentFragment 返回

cloneContents() —— 复制范围中的内容，并将复制的内容作为 DocumentFragment 返回

insertNode(node) —— 在范围的起始处将 node 插入文档

surroundContents(node) —— 使用 node 将所选范围中的内容包裹起来。要使此操作有效，则该范围必须包含其中所有元素的开始和结束标签：不能像 <i>abc 这样的部分范围。

更多API

更多API及详细参数见 MDN Range

Selection

Range是用来管理选择范围的通用对象，但是新建一个Range对象并不一定会在文档上创建一个选择。 Selection对象是用来获取文档选择的。可以通过winodw.getSelection()或document.getSelection()来获取。一个选择可以包括零个或多个范围，但实际上除firefox允许同时选择多个范围，其他浏览器最多只能选择一个范围。

selection的属性

如前所述，理论上一个选择可能包含多个范围。我们可以使用下面这个方法获取这些范围对象：

getRangeAt(i) —— 获取第 i 个范围，i 从 0 开始。在除 Firefox 之外的所有浏览器中，仅使用 0。

与范围类似，选择的起点被称为“锚点（anchor）”，终点被称为“焦点（focus）”。

主要的选择属性有：

anchorNode —— 选择的起始节点，

anchorOffset —— 选择开始的 anchorNode 中的偏移量，

focusNode —— 选择的结束节点，

focusOffset —— 选择开始处 focusNode 的偏移量，

isCollapsed —— 如果未选择任何内容（空范围）或不存在，则为 true 。

rangeCount —— 选择中的范围数，除 Firefox 外，其他浏览器最多为 1。

selection锚点和焦点与range开始结束点的区别

selection的锚点可在选择的焦点之后，以表达从右向左选择，而range的开始点必须在结束点之前

selection API

更多详细API及其参数见 MDN Selection

以上就是Selection与Range 对象操作示例指南的详细内容，更多关于Selection Range 对象操作的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • document.selection.createRange方法与实例

    配合 execCommand,在 HTML 编辑器中很有用,比如:文字加粗.斜体.复制.粘贴.创建超链接等. 哈哈.我们都是新生来得.大家都来相互帮助呀.这样我们才能进步,我们才能赚大钱! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 这个不错 就是现在文本域里有一段文字,当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框,对话框的信息就是你选中的文字 哪位老大能解决的呀?请多多帮忙!!!谢谢 就是现在文本域里有一段文字,当你选种其中几个字后点击一个按钮或者链接会弹出一个对话

  • jquery 判断selection range 是否在容器中的简单实例

    判断当前选中区域是否在某个父容器中得方法: var range = document.getSelection().getRangeAt(0); if($(range.startContainer).parents("XXXX").length >0) { 在XXX 容器中 } 以上这篇jquery 判断selection range 是否在容器中的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 用 js 的 selection range 操作选择区域内容和图片

    用 js 的 selection range 操作选择区域内容和图片

    先放上最后的效果,这是点击图片以前: 这是点击图片以后: 非常清晰,一目了然,就算是小白用户也明白发生了什么.挺好的. 最近在做编辑器相关的东西,遇到一个需求,用户在编辑器中插入或者粘贴的图片要支持点击以后,可以按 Backspace 键或者 Delete 键删除掉. 刚开始拿到这个需求的想法是调用编辑器自带的删除图片方法删掉图片,但后来查看源码发现这个方法是编辑器内部方法,并没有暴露出来,于是第一个思路走不通了. 第二个思路是在编辑器的顶层容器里监听 keyup 事件,然后判断是否是两个删除键

  • Selection与Range 对象操作示例指南

    目录 前言 Range 选择部分文本 选择dom元素节点 range对象属性 编辑范围的方法 Selection selection的属性 selection锚点和焦点与range开始结束点的区别 前言 有些时候我们需要能够通过JavaScript访问页面的当前选择,已达成选择(取消选择)部分节点以从文档中删除所选内容或像文档中插入某些新内容.我们需要Range和Selction对象已达成我们的目的. Range 选择的基本概念是Range,其本质是一对‘边界点’:范围起点和范围终点 我们可以通

  • FreeRTOS实时操作系统移植操作示例指南

    FreeRTOS实时操作系统移植操作示例指南

    目录 1.添加FreeRTOS源码 2.向工程分组中添加文件 附上delay.c和delay.h的代码 1.添加FreeRTOS源码 在基础工程中新建一个名为 FreeRTOS 的文件夹,将 FreeRTOS 的源码(source文件夹下的内容)添加到这个文件夹中 portable文件夹中,只需留下 keil.MemMang 和 RVDS这三个文件夹,其他的都可以删除掉. 2.向工程分组中添加文件 打开基础工程,新建分组 FreeRTOS_CORE 和 FreeRTOS_PORTABLE,然后向

  • golang gorm的Callbacks事务回滚对象操作示例

    目录 1. Callbacks 1.1. 创建对象 1.2. 更新对象 1.3. 删除对象 1.4. 查询对象 1.5. 回调示例 1. Callbacks 您可以将回调方法定义为模型结构的指针,在创建,更新,查询,删除时将被调用,如果任何回调返回错误,gorm将停止未来操作并回滚所有更改. 1.1. 创建对象 创建过程中可用的回调 // begin transaction 开始事物 BeforeSave BeforeCreate // save before associations 保存前关

  • JavaIO字符操作和对象操作示例详解

    目录 字符操作 编码与解码 String 的编码方式 Reader 与 Writer 实现逐行输出文本文件的内容 对象操作 序列化 Serializable transient 字符操作 编码与解码 编码就是把字符转换为字节,而解码是把字节重新组合成字符. 如果编码和解码过程使用不同的编码方式那么就出现了乱码. GBK 编码中,中文字符占 2 个字节,英文字符占 1 个字节: UTF-8 编码中,中文字符占 3 个字节,英文字符占 1 个字节: UTF-16be 编码中,中文字符和英文字符都占

  • Python使用jsonpath-rw模块处理Json对象操作示例

    本文实例讲述了Python使用jsonpath-rw模块处理Json对象操作.分享给大家供大家参考,具体如下: 这两天在写一个爬虫,需要从网站返回的json数据提取一些有用的数据. 向url发起请求,返回的是response,在python3中,response.content是二进制bytes类型的,需要用decode()转成unicode的str类型 #如果用的requests发的请求 import json response = requests.get(url,headers=self.

  • python sqlite的Row对象操作示例

    本文实例讲述了python sqlite的Row对象操作.分享给大家供大家参考,具体如下: 一 代码 import sqlite3 conn=sqlite3.connect("test.db") c=conn.cursor() c.execute("DROP TABLE stocks") c.execute('''CREATE TABLE stocks(data text,trans text,symbol text,qty real,price real) '''

  • Java实现创建运行时类的对象操作示例

    本文实例讲述了Java实现创建运行时类的对象操作.分享给大家供大家参考,具体如下: 获取运行时类的方法: public void test() throws ClassNotFoundException { /* * Class类是反射的源头 * 创建一个类,通过编译(javac.exe),生成对应的.class文件,之后使用java.exe加载(JVM的类加载器完成的)此.class文件. * 此.class文件加载到内存后,就是一个运行时类,存放在缓存区. * 那么这个运行时类本身就是一个C

  • Python使用pickle模块储存对象操作示例

    本文实例讲述了Python使用pickle模块储存对象操作.分享给大家供大家参考,具体如下: 众所周知,当我们需要储存数据的时候,就需要用到重定向.但是,这些都是储存简单的数据类型,那么当我们需要存储一个类的实例的时候该怎么存储呢? 实际上,我们需要用到一个模块---pickle,翻译为泡菜坛子 首先贴上一篇:pickle的使用方法 然后贴上一份代码: # -*- coding:utf-8 -*- import pickle class Person(): def __init__(self,

  • JS localStorage存储对象，sessionStorage存储数组对象操作示例

    本文实例讲述了JS localStorage存储对象,sessionStorage存储数组对象操作.分享给大家供大家参考,具体如下: 一.前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个商品准备结算,又修改了商品数量,这时候发起了请求,页面数据被渲染,打钩的商品全被恢复未选中. 想着将所有选中商品的独有Id存入数组,利用localStorage存

  • Python可迭代对象操作示例

    本文实例讲述了Python可迭代对象.分享给大家供大家参考,具体如下: 1.列表生成式 list = [result for x in range(m, n)] g1 = (i for i in range(101)) print(type(g1)) print(g1) print(g1.__next__()) 输出: <class 'generator'> <generator object <genexpr> at 0x0000024E6AC08F10> 0 g1

随机推荐