JavaScript 中的 Range 和 Selection 对象

news2024/12/22 2:52:48

JavaScript 中的 Range 和 Selection 对象

前言

最近在做鼠标框选的需求，鼠标框选就需要用到 Range 和 Selection 对象。

Range 表示选择的区间范围，Selection 表示选择的文档内容。

下面就详细说下这两个对象

一、Range

Range 接口表示一个包含节点与文本节点的一部分的文档片段。

不仅仅可以用于鼠标框选，页面上任何元素、文本都可以创建 Range。

Range 是浏览器原生的对象。

image

1. 创建 Range 实例，并设置起始位置

<body>
  <ul>
    <li>Vite</li>
    <li>Vue</li>
    <li>React</li>
    <li>VitePress</li>
    <li>NaiveUI</li>
  </ul>
</body>
<script>
  // 创建 Range 对象
  const range = new Range()
  const liDoms = document.querySelectorAll("li");
  // Range 起始位置在 li 2
  range.setStartBefore(liDoms[1]);
  // Range 结束位置在 li 3
  range.setEndAfter(liDoms[2]);
  // 获取 selection 对象
  const selection = window.getSelection();
  // 添加光标选择的范围
  selection.addRange(range);
</script>

image

可以看到，选择内容为第二行和第三行

1.1 浏览器兼容情况

image

2. Range 属性

  1. startContainer：起始节点。

  2. startOffset：起始节点偏移量。

  3. endContainer：结束节点。

  4. endOffset：结束节点偏移量。

  5. collapsed：范围的开始和结束是否为同一点。

  6. commonAncestorContainer：返回完整包含 startContainer 和 endContainer 的最深一级的节点。

2.1. 用我们上面创建的实例来看下 range 属性的值

image

2.2. 如果我们只选择文本内容时

只选择 li 中的 itePres

image

可以看出 range 属性对应的值

image

3. Range 方法

3.1. cloneContents()

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

const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const documentFragment = range.cloneContents();
document.body.appendChild(documentFragment);
3.2. cloneRange()

cloneRange()：创建一个具有相同起点/终点的新范围， 非引用，可以随意改变，不会影响另一方。

const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const clone = range.cloneRange();
3.3. collapse()

collapse(toStart)：如果 toStart=true 则设置 end=start，否则设置 start=end，从而折叠范围。

const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);
range.selectNode(referenceNode);
range.collapse(true);
3.4. compareBoundaryPoints()

compareBoundaryPoints(how, sourceRange)：两个范围边界点进行比较，返回一个数字 -1、0、1。

const range = document.createRange();
range.selectNode(document.querySelector("div"));
const sourceRange = document.createRange();
sourceRange.selectNode(document.getElementsByTagName("div")[1]);
const compare = range.compareBoundaryPoints(Range.START_TO_END, sourceRange);
3.5. comparePoint()

comparePoint(referenceNode, offset)：返回-1、0、1具体取决于 是 referenceNode 在 之前、相同还是之后。

const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const returnValue = range.comparePoint(document.getElementsByTagName("p").item(0), 1);
3.6. createContextualFragment()

createContextualFragment(tagString)：返回一个 DocumentFragment。

const tagString = "<div>I am a div node</div>";
const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);
3.7. deleteContents()

deleteContents()：删除框选的内容。

const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
range.deleteContents();
3.8. extractContents()

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

const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const documentFragment = range.extractContents();
document.body.appendChild(documentFragment);
3.9. getBoundingClientRect()

getBoundingClientRect()：和 dom 一样，返回 DOMRect 对象。

const range = document.createRange();
range.setStartBefore(document.getElementsByTagName("em").item(0));
range.setEndAfter(document.getElementsByTagName("em").item(1));
const clientRect = range.getBoundingClientRect();
const highlight = document.getElementById("highlight");
highlight.style.left = `${clientRect.x}px`;
highlight.style.top = `${clientRect.y}px`;
highlight.style.width = `${clientRect.width}px`;
highlight.style.height = `${clientRect.height}px`;
3.10. getClientRects()

getClientRects()：返回可迭代的对象序列 DOMRect。

const range = document.createRange();
range.selectNode(document.querySelector("div"));
const rectList = range.getClientRects();
const output = document.querySelector("#output");
for (const rect of rectList) {
  output.textContent = `${output.textContent}\n${rect.width}:${rect.height}`;
}
3.11. insertNode()

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

const range = document.createRange();
const newNode = document.createElement("p");
newNode.appendChild(document.createTextNode("New Node Inserted Here"));
range.selectNode(document.getElementsByTagName("div").item(0));
range.insertNode(newNode);
3.12. intersectsNode()

intersectsNode(referenceNode)：判断与给定的 node 是否相交。

const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const intersectingNode = range.intersectsNode(
  document.getElementsByTagName("p").item(0),
);
3.13. selectNode()

selectNode(node)：设置范围以选择整个 node。

const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);
range.selectNode(referenceNode);
3.14. selectNodeContents()

selectNodeContents(node)：设置范围以选择整个 node 的内容。

const range = document.createRange();
const referenceNode = document.querySelector("div");
range.selectNodeContents(referenceNode);
3.15. setStart()

setStart(startNode, startOffset)：设置起点。

const element = document.getElementById("content");
const textNode = element.childNodes[0];
const range = document.createRange();
range.setStart(textNode, 0); // Start at first character
range.setEnd(textNode, 5); // End at fifth character
document.getElementById("log").textContent = range;
3.16. setEnd()

setEnd(endNode, endOffset)：设置终点。

const range = document.createRange();
const endNode = document.getElementsByTagName("p").item(3);
const endOffset = endNode.childNodes.length;
range.setEnd(endNode, endOffset);
3.17. setStartBefore()

setStartBefore(node)：将起点设置在 node 前面。

const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);
range.setStartBefore(referenceNode);
3.19. setStartAfter()

setStartAfter(node)：将起点设置在 node 后面。

const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);
range.setStartAfter(referenceNode);
3.19. setEndBefore()

setEndBefore(node)：将终点设置为 node 前面。

const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);
range.setEndBefore(referenceNode);
3.20. setEndAfter()

setEndAfter(node)：将终点设置为 node 后面。

const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);
range.setEndAfter(referenceNode);
3.21. surroundContents()

surroundContents(node)：使用 node 将所选范围内容包裹起来。

const range = document.createRange();
const newParent = document.createElement("h1");
range.selectNode(document.querySelector(".header-text"));
range.surroundContents(newParent);

4. 创建 Range 的方法

4.1. Document.createRange
const range = document.createRange();
4.2. Selection 的 getRangeAt() 方法
const range = window.getSelection().getRangeAt(0)
4.3. caretRangeFromPoint() 方法
if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
}
4.4. Range() 构造函数
const range = new Range()

5. Range 兼容性

image

  • 【详细兼容性：Can I use】

二、Selection

Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。

1. 获取文本对象

window.getSelection()

image

image

2. Selection 术语

2.1. 锚点 (anchor)

锚指的是一个选区的起始点（不同于 HTML 中的锚点链接）。当我们使用鼠标框选一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时，锚点是不会变的。

2.2. 焦点 (focus)

选区的焦点是该选区的终点，当你用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。

2.3. 范围 (range)

范围指的是文档中连续的一部分。一个范围包括整个节点，也可以包含节点的一部分，例如文本节点的一部分。用户通常下只能选择一个范围，但是有的时候用户也有可能选择多个范围。

2.4. 可编辑元素 (editing host)

一个用户可编辑的元素（例如一个使用 contenteditable 的 HTML 元素，或是在启用了 designMode 的 Document 的子元素）。

3. Selection 的属性

首先要清楚，选择的起点称为锚点(anchor)，终点称为焦点(focus)。

  1. anchorNode：选择的起始节点。

  2. anchorOffset：选择开始的 anchorNode 中的偏移量。

  3. focusNode：选择的结束节点。

  4. focusOffset：选择开始处 focusNode 的偏移量。

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

  6. rangeCount：选择中的范围数，之前说过，除 Firefox 外，其他浏览器最多为1。

  7. type：类型：None、Caret、Range

image

image

4. Selection 方法

4.1. addRange()

addRange(range): 将一个 Range 对象添加到当前选区。

const strongs = document.getElementsByTagName("li");
const selection = window.getSelection();
for (var i = 0; i < strongs.length; i++) {
  const range = document.createRange();
  range.selectNode(strongs[i]);
  selection.addRange(range);
}
4.2. collapse()

collapse(node, offset): 将选区折叠到指定的节点和偏移位置。

const body = document.getElementsByTagName("body")[0];
window.getSelection().collapse(body, 0);
4.3. collapseToEnd()

collapseToEnd(): 将选区折叠到当前选区的末尾，并把光标定位在原选区的末尾处。

const selection = window.getSelection();
selection.collapseToEnd()
4.4. collapseToStart()

collapseToStart(): 将选区折叠到当前选区的起始位置，并把光标定位在原选区的最开始处。

const selection = window.getSelection();
selection.collapseToStart()
4.5. containsNode()

containsNode(node, partlyContained): 判断选区是否包含指定的节点，可以选择是否部分包含。

window.getSelection().containsNode(document.body, true);
4.6. deleteFromDocument()

deleteFromDocument(): 从文档中删除选区内容。

const selection = window.getSelection();
selection.deleteFromDocument();
4.7. empty()

empty(): 从选区中移除所有范围（同 `removeAllRanges()``，已废弃）。

const selection = window.getSelection();
selection.empty();
4.8. extend()

extend(node, offset): 将选区的焦点节点扩展到指定的节点和偏移位置。

const selection = window.getSelection();
selection.extend(document.body, 3)
4.9. getRangeAt()

getRangeAt(index): 返回选区中指定索引处的 Range 对象。

const  ranges = [];
const selection = window.getSelection();
for (let i = 0; i < selection.rangeCount; i++) {
  ranges[i] = selection.getRangeAt(i);
}
4.10. removeAllRanges()

removeAllRanges(): 移除所有选区中的范围。

const selection = window.getSelection();
selection.removeAllRanges();
4.11. removeRange()

removeRange(range): 从选区中移除指定的 Range 对象。

const selection = window.getSelection();
if (selection.rangeCount > 1) {
  for (let i = 1; i < selection.rangeCount; i++) {
    selection.removeRange(selection.getRangeAt(i));
  }
}
4.12. selectAllChildren()

selectAllChildren(node): 选中指定节点的所有子节点。

window.getSelection().selectAllChildren(document.body);
4.13. setBaseAndExtent()

setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset): 设置选区的起始和结束节点及偏移位置。

window.getSelection().setBaseAndExtent(document.getElementById('li1'), 0, document.getElementById('li3'), 1)
4.14. setPosition()

setPosition(node, offset)：collapse 的别名

window.getSelection().setPosition(document.body, 0);

5. Selection 兼容性

image

  • 【详细兼容性：Can I use】

到此结束…

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1685129.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

太速科技-FMC125-两路125Msps AD，两路160Msps DA FMC子卡

太速科技-FMC125-两路125Msps AD，两路160Msps DA FMC子卡

FMC125-两路125Msps AD&#xff0c;两路160Msps DA FMC子卡 一、板卡概述 板卡可实现2路14bit 125Msps AD 和2路16bit 160MspsDA功能&#xff0c;FMC LPC连接器用于扩展到xilinx用于模拟信号、中频信号采集&#xff0c;信号发出等应用。 二、性能指标 板卡功能 参…
阅读更多...
Vue3 Uncaught SyntaxError: Unexpected token ＜‘ 错误参考解决方法

Vue3 Uncaught SyntaxError: Unexpected token ＜‘ 错误参考解决方法

1.最近在做一个登录首页的动画效果,动画组件是用的网上类似csdn方式,但是本地引入完全没问题,打包正式环境,直接报错,动画直接不起作用. 关于vue2的解决方法: 1.检查引用的 JavaScript 文件是否正确&#xff1a;确认所有引用的外部 JavaScript 文件路径是否正确&#xff0c;可…
阅读更多...
陪玩系统源码，高质量的陪玩系统源码，游戏陪玩APP源码开发，语音陪玩源码搭建，整合需求精准定位

陪玩系统源码，高质量的陪玩系统源码，游戏陪玩APP源码开发，语音陪玩源码搭建，整合需求精准定位

如今越来越多的人看到了游戏行业的市场&#xff0c;作为最近几年出现的一个新兴产业&#xff0c;需求是巨大的&#xff0c;因此开发陪玩app源码&#xff0c;正好可以优化服务体验来整合该市场。 原生陪玩源码or混合开发陪玩源码 游戏陪玩APP源码&#xff0c;基本上都是原生的&…
阅读更多...
Docker安装MongoDB（Linux版）

Docker安装MongoDB（Linux版）

文章目录 前言一、Docker环境的准备1.安装依赖2.安装Docker 二、使用Docker安装MongoDB1.mongo版本选取2.拉取合适的镜像3.宿主机创建MongoDB需要挂载的文件夹4.第一次无认证创建mongo用户5.启动需要认证的mongo容器 问题汇总总结 前言 本文章主要介绍在Centos系统&#xff0c…
阅读更多...
ROS | 用IMU实现航向锁定

ROS | 用IMU实现航向锁定

基本原理&#xff1a; 引入速度控制模块&#xff1a; /cmd_vel 设置目标角度&#xff0c;计算偏移差值 然后消息传递在z轴移动的角度 代码实现&#xff1a; C&#xff1a; CPP文件还需要编辑CMAKE文件 Python: Python文件需要给于权限&#xff1a;chmod x imu_node.py
阅读更多...
【Muduo】三大核心之Poller、EPollPoller

【Muduo】三大核心之Poller、EPollPoller

Poller 在Muduo中&#xff0c;Poller负责基于IO多路复用机制进行IO事件监听和处理的组件&#xff0c;作为EPollPoller的基类&#xff0c;为后者提供了与PollPoller统一的IO复用接口&#xff0c;并且声明了一个关键的创建派生类的成员函数&#xff1a; static Poller *newDefa…
阅读更多...
NDIS小端口驱动(五)

NDIS小端口驱动(五)

在需要的时候&#xff0c;我们也许需要NDIS微型端口程序信息&#xff0c;下面会从多个方面来讨论如何查询NDIS微型端口驱动。 查询无连接微型端口驱动程序 若要查询无连接微型端口驱动程序维护的 OID&#xff0c;绑定协议调用 NdisOidRequest 并传递 一个NDIS_OID_REQUEST 结…
阅读更多...
OSPF多区域组网实验（华为）

OSPF多区域组网实验（华为）

思科设备参考&#xff1a;OSPF多区域组网实验&#xff08;思科&#xff09; 技术简介 OSPF多区域功能通过划分网络为多个逻辑区域来提高网络的可扩展性和管理性能。每个区域内部运行独立的SPF计算&#xff0c;而区域之间通过区域边界路由器进行路由信息交换。这种划分策略适用…
阅读更多...
线性代数（二）

线性代数（二）

1.标量 标量也叫0D张量&#xff0c;一个标量就是一个数&#xff0c;它只有大小&#xff0c;没有方向。 import torch x torch.Tensor(3) print(x)2.向量 向量也叫1D张量。向量只有一个轴&#xff0c;沿着行的方向&#xff0c;或者沿着列的方向。向量一般指列向量。 import…
阅读更多...
光伏储能EMS 风电智慧能量管理系统 -安科瑞王盼盼

光伏储能EMS 风电智慧能量管理系统 -安科瑞王盼盼

安科瑞18721098782王盼盼 一&#xff1a;储能 EMS&#xff08;Energy Management System&#xff09; 储能 EMS&#xff1a;储能 EMS 是一个综合管理系统&#xff0c;用于整体管理和优化储能系统的运行。它基于电力系统的需求和需求响应&#xff0c;通过控制和协调储能设备的…
阅读更多...
WPF中DataGrid实现多选框功能

WPF中DataGrid实现多选框功能

1. 效果图 2. Model建立 public class RstModelCheck : ObservableObject {//为了显示Head1和Head2.而且View中绑定属性而非字段&#xff0c;否则不能显示。public string? Name { get; set; } public bool PlatenAll {get > _platenAll;set{SetProperty(ref _platenAl…
阅读更多...
【代码随想录】【算法训练营】【第15天】 [102]二叉树的层序遍历 [226]翻转二叉树 [101]对称二叉树

【代码随想录】【算法训练营】【第15天】 [102]二叉树的层序遍历 [226]翻转二叉树 [101]对称二叉树

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 15&#xff0c;一周中最困难的周三~ 题目详情 [102] 二叉树的层序遍历 题目描述 102 二叉树的层序遍历 解题思路 前提&#xff1a;二叉树的层级遍历 思路&#xff1a;利用队列的“先进先出…
阅读更多...
C#利用WinForm实现可以查看指定目录文件下所有图片

C#利用WinForm实现可以查看指定目录文件下所有图片

目录 一、关于Winform 二、创建应用 三、功能实现 四、代码部分 一、关于Winform Windows 窗体是用于生成 Windows 桌面应用的 UI 框架。 它提供了一种基于 Visual Studio 中提供的可视化设计器创建桌面应用的高效方法。 利用视觉对象控件的拖放放置等功能&#xff0c;可…
阅读更多...
信捷PLC 编程常用寄存器及编程技巧说明

信捷PLC 编程常用寄存器及编程技巧说明

最近在用信捷的PLC&#xff0c;分享下常用的寄存器和编程技巧说明。 技巧主要包括以下几个方面&#xff1a; 充分规划各个功能区&#xff1a;在编写程序时&#xff0c;需要充分规划各个功能区。 考虑伺服步进功能和气缸手动功能的应用&#xff0c;手动操作时&#xff0c;可…
阅读更多...
C语言 | Leetcode C语言题解之第107题二叉树的层序遍历II

C语言 | Leetcode C语言题解之第107题二叉树的层序遍历II

题目&#xff1a; 题解&#xff1a; int** levelOrderBottom(struct TreeNode* root, int* returnSize, int** returnColumnSizes) {int** levelOrder malloc(sizeof(int*) * 2001);*returnColumnSizes malloc(sizeof(int) * 2001);*returnSize 0;if (!root) {return level…
阅读更多...
个人感觉对Material设计有用的几个网址

个人感觉对Material设计有用的几个网址

(一) Modular and customizable Material Design UI components for Android GIthub: material-components-android (二) 学习Material设计 Material Design (三) 用于创建Material主题&#xff0c;支持导出多种格式 material-theme-builder
阅读更多...
Web API——获取DOM元素

Web API——获取DOM元素

目录 1、根据选择器来获取DOM元素 2.、根据选择器来获取DOM元素伪数组 3、根据id获取一个元素 4、通过标签类型名获取所有该标签的元素 5、通过类名获取元素 目标&#xff1a;能查找/获取DOM对象 1、根据选择器来获取DOM元素 语法&#xff1a; document.querySelector(css选择…
阅读更多...
一维前缀和[模版]

一维前缀和[模版]

题目链接 题目: 分析: 因为要求数组中连续区间的和, 可以使用前缀和算法注意:下标是从1开始算起的, 真正下标0的位置是0第一步: 预处理出来一个前缀和数组dp dp[i] 表示: 表示[1,i] 区间所有元素的和dp[i] dp[i-1] arr[i]例如示例一中: dp数组为{1,3,7}第二步: 使用前缀数…
阅读更多...
css特性（继承性、层叠性）

css特性（继承性、层叠性）

1.继承性 可以继承的常见属性&#xff08;文字控制属性都可以继承&#xff09; ps:可以通过调试器查看是否能够继承 注意&#xff1a;a标签的color会继承失效&#xff1b;h系列标签的font-size会继承失效 2.层叠性 后面的样式会覆盖前面的样式 给同一个标签设置不同的样式…
阅读更多...
酷开科技以内容为契机，酷开系统向消费者需求的深度挖掘迈进一步

酷开科技以内容为契机，酷开系统向消费者需求的深度挖掘迈进一步

酷开系统还拥有强大的内容资源和推荐算法&#xff0c;能够根据消费者的兴趣爱好为其提供个性化的推荐服务。无论是电影、电视剧、综艺节目&#xff0c;还是新闻、体育、娱乐资讯&#xff0c;酷开系统都能帮助大家快速找到感兴趣的内容&#xff0c;并且通过智能推荐算法不断优化…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023