摘要：最近做个小功能功能效果如图试想一下，如果在选择文本之后不仅能获得对应文档片段，而且再获得文本对应的文档位置，这样我们才能给文档片段包裹类名再后插入原来的位置。选区中包含的范围的数量将指定的范围添加到选区中。
最近做个小功能,功能效果如图:
试想一下，如果在选择文本之后不仅能获得对应文档片段，而且再获得文本对应的文档位置，
这样我们才能给文档片段包裹类名再后插入原来的位置。
这样的话咱们先来学习DOM2和DOM3的几个概念
1. window.getSelection()getSelection() 方法，可以确定实际选择的文本。
这个方法是 window 对象和 document 对象的属性，调用它会返回一个表示当前选择文本的 Selection对象。
每个 Selection 对象都有下列属性。anchorNode ：选区起点所在的节点。
anchorOffset ：在到达选区起点位置之前跳过的 anchorNode 中的字符数量。
focusNode ：选区终点所在的节点。
focusOffset ： focusNode 中包含在选区之内的字符数量。
isCollapsed ：布尔值，表示选区的起点和终点是否重合。
rangeCount ：选区中包含的 DOM 范围的数量
addRange(range) ：将指定的 DOM 范围添加到选区中。
collapse(node, offset) ：将选区折叠到指定节点中的相应的文本偏移位置。
collapseToEnd() ：将选区折叠到终点位置。
collapseToStart() ：将选区折叠到起点位置。
containsNode(node) ：确定指定的节点是否包含在选区中。
deleteFromDocument() ：从文档中删除选区中的文本，与 document.execCommand("delete",false, null) 命令的结果相同。
extend(node, offset) ：通过将 focusNode 和 focusOffset 移动到指定的值来扩展选区。
getRangeAt(index) ：返回索引对应的选区中的 DOM 范围。
removeAllRanges() ：从选区中移除所有 DOM 范围。实际上，这样会移除选区，因为选区中至少要有一个范围。
reomveRange(range) ：从选区中移除指定的 DOM 范围。
selectAllChildren(node) ：清除选区并选择指定节点的所有子节点。
toString() ：返回选区所包含的文本内容。
by-《javascript高级程序设计》
咱们需要用到的就是getRangeAt()这个属性,这个属性返回索引对应的选区中的 DOM 范围，是一个Range对象这样就记住了获取文档片段的位置。
console一下看看这个属性所在位置
extractContents(),会从文档中移除范围选区,并返回范围的文档片段，这样就获得了想要的文档片段。
3. Range.insertNode()insertNode()，是在Range的起始位置插入节点的方法。详细属性可以自行参考MDN或者高程
console一下看看上两个属性所在位置
//css
.active {
background: #00FF90;
}
//html
积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。
故不积跬步，无以至千里；不积小流，无以成江海。骐骥一跃，不能十步；驽马十驾，功在不舍。
锲而舍之，朽木不折；锲而不舍，金石可镂。蚓无爪牙之利，筋骨之强，上食埃土，下饮黄泉，用心一也。
蟹六跪而二螯，非蛇鳝之穴无可寄托者，用心躁也。
//js
function select() {
let selectedRange = window.getSelection().getRangeAt(0); //获取选中文本位置,返回Range对象
let selectedFragment = selectedRange.extractContents(); //移除选区文档片段,并返回
let span = document.createElement("span");
span.classList = "active";
span.appendChild(selectedFragment); //创建span标签添加想要的类名,名把返回的文档片段插入
selectedRange.insertNode(span); //在获取的Range对象中插入span标签
span.onclick = function(ev) {
//再点击span标签,在其前面添加span标签内的文本,并删除这个span标签
this.parentNode.insertBefore(document.createTextNode(this.innerText), this);
this.parentNode.removeChild(this);
};
}
document.getElementById("text").onmouseup = function() {
select();
window.getSelection().removeAllRanges(); //鼠标松开后取消浏览器默认的深蓝色选中样式
};
在线地址
结语DOM2和DOM3的功能远不止这些，它有着更加细腻和多样的DOM操作，需要我们去发掘和熟悉。
本篇文章为本人的处女篇。在排版和表达上都还有欠缺，如能对您有所帮助，实在是感到荣幸。如有不合理之处也请大家多多指点。
谢谢浏览。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108158.html
摘要：扩展为了实现更多的功能，会有一些标准或专有的扩展。标准扩展主要有选择符元素遍历一选择符选择符能够允许代码直接根据选择符选择与某个模式匹配的元素。 DOM扩展 为了实现更多的功能，会有一些标准或专有的DOM扩展。 标准扩展主要有： SelectorAPI（选择符API） HTML5 Element Traversal（元素遍历） 一、 选择符API 选择符API能够允许J...
摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。 前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。 －－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...
摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。 前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。 －－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...
摘要：无论是否移动，元素仍然占据原来的空间。绝对定位绝对定位使元素的位置与文档流无关，因此不占据空间。 为啥读这本书 现在前端圈子过于浮躁，掌握基础无疑比掌握一个js框架重要 css怎么都能写出来，但是要写的好写得快还得多读书 css魔法推荐的，读完这个读读css揭秘 当然，根本原因还是觉得自己掌握不好 开始总结吧~ 一. 基础知识 经过上世纪没有 css的痛苦时的混沌时期，人们开始了进...
摘要：组件是可以配置的构建元素。可以附加到页面布局部件中。组件是的核心特性。每个组件都可以对网站的功能进行扩展。组件可以在页面上输出代码，但是这不是主要的，组件的一个重要功能是处理请求处理表单提交回调，处理页面执行周期。 Components Components这里我们称之为组件。 组件是可以配置的构建元素。可以附加到Pages（页面）、Layouts（布局）、Partials（部件）中。...
阅读 3079·2021-11-24 10:47
阅读 3831·2021-11-02 14:43
阅读 2227·2021-09-26 10:15
阅读 2251·2021-09-08 09:35
阅读 559·2019-08-30 12:45
阅读 2779·2019-08-29 17:04
阅读 3214·2019-08-26 14:05
阅读 1258·2019-08-26 12:10
