在DOM树中，给出任意2个node，如何找出两者之间所有的node？

Question

我们要做一个在网页上划词进行高亮的功能，比如下面这种html

<div id="div">
    <h1>我是h1标题</h1>
    <p>我是第一段</p>
    <p>我是第二段</p>
    <p>我是第<span>三段</span></p>

</div>

我们通过selection对象获取用户划取的起始与终止节点对象。
用户使用鼠标划取时，很可能是从第一个p标签中间，滑到第三个p标签里的span标签中。我们通过selection对象可以知道，用户是从第一个p标签开始划的，是在一个span标签里停止的。
但是，我们如何获得用户划取的范围内的其他节点呢？selection对象没有提供这些信息。

请问各位，有什么好的方法吗？

多谢。

Answer 1

要分情况考虑吧，这两个node是不是有父子关系？有，很简单，没有，要两个node同时找上级节点，直到找到共同的上级节点为止，在从共同的父亲节点向下，先找到一个node，开始记录，找到另一个node，记录停止，记录的所有节点就是两个节点间的节点了啊，但这只是dom树上的，如果是页面上的，那就更复杂了，还要考虑postion、float、top、left等等css属性，感觉……几乎不能可能实现

Answer 2

页面上相邻不一定dom树相邻额，这种情况咋办。。。

Answer 3

首先，我不知道题主要找出这些node干什么，所以更加只能瞎答了。

其一，先找到共同父级元素，selection有给出这个对象。然后遍历其子孙元素，从启示node开始标记，到结束node中断遍历。

其二，通过给选区文字设置一个特定的字体+字号+前景色组合，然后通过querySelectorAll的属性选择器选出font元素，然后在获取他们parentNode。最后撤销文本样式操作。

其三，如果你不介意node其实被替换过，那么这种方法给能更为准确：直接把selection对象的文本拿出来用replace为其中的所有tag加上一个特定的自定义属性，然后把文本覆盖粘贴回去，然后再用querySelectorAll选出来，然后去掉自定义属性。

老实说，selection对象这个知识点算是我的薄弱点之一了，自己练手写的编辑器始终是无限bug，很大程度上就是因为selection对象没有吃透，但既然被邀请了，那就也努力强答一个。

Answer 4

只能给你这个文档了，

https://developer.mozilla.org...命令

使用execCommand 在现代浏览器基本可以，

先 italic 套一个i标签，然后给i标签 styleWithCSS 或者也可以直接在 你的 css 写死。

Answer 5

划词高亮为啥不直接用 伪元素 选择器::selection，如果考虑兼容性当我没说

Answer 6

我能说这是自己给自己挖坑吗！一样的标示为啥不加个 id什么的区分，自己写的代码方便区分不应该这样去写的。只能说可以了解一下这些东西，不建议你去这样写代码。

Answer 7

1. document.querySelect("*"), 得到所以dom的顺序. 你可以加个id, 方便读取.
2. selection对象有个anchorNode(起点), focusNode(终点) , 在你这个场景, 都指向了textNode
3. 然后,textNode.parentElement就得到两个文字所在的<P>,
4. 然后结合第一部的dom序号, 找夹在两个P中间的所有dom.