我们要做一个在网页上划词进行高亮的功能，比如下面这种html
6
802
我是h1标题
我是第一段
我是第二段
我是第三段
我们通过selection对象获取用户划取的起始与终止节点对象。
用户使用鼠标划取时，很可能是从第一个p标签中间，滑到第三个p标签里的span标签中。我们通过selection对象可以知道，用户是从第一个p标签开始划的，是在一个span标签里停止的。
但是，我们如何获得用户划取的范围内的其他节点呢？selection对象没有提供这些信息。
请问各位，有什么好的方法吗？
多谢。
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
要分情况考虑吧，这两个node是不是有父子关系？有，很简单，没有，要两个node同时找上级节点，直到找到共同的上级节点为止，在从共同的父亲节点向下，先找到一个node，开始记录，找到另一个node，记录停止，记录的所有节点就是两个节点间的节点了啊，但这只是dom树上的，如果是页面上的，那就更复杂了，还要考虑postion、float、top、left等等css属性，感觉……几乎不能可能实现
页面上相邻不一定dom树相邻额，这种情况咋办。。。
首先，我不知道题主要找出这些node干什么，所以更加只能瞎答了。
其一，先找到共同父级元素，selection有给出这个对象。然后遍历其子孙元素，从启示node开始标记，到结束node中断遍历。
其二，通过给选区文字设置一个特定的字体+字号+前景色组合，然后通过querySelectorAll的属性选择器选出font元素，然后在获取他们parentNode。最后撤销文本样式操作。
其三，如果你不介意node其实被替换过，那么这种方法给能更为准确：直接把selection对象的文本拿出来用replace为其中的所有tag加上一个特定的自定义属性，然后把文本覆盖粘贴回去，然后再用querySelectorAll选出来，然后去掉自定义属性。
老实说，selection对象这个知识点算是我的薄弱点之一了，自己练手写的编辑器始终是无限bug，很大程度上就是因为selection对象没有吃透，但既然被邀请了，那就也努力强答一个。
划词高亮为啥不直接用 伪元素 选择器
::selection，如果考虑兼容性当我没说我能说这是自己给自己挖坑吗！一样的标示为啥不加个 id什么的区分，自己写的代码方便区分不应该这样去写的。只能说可以了解一下这些东西，不建议你去这样写代码。