首页 > 在DOM树中,给出任意2个node,如何找出两者之间所有的node?

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

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

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

</div>

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

请问各位,有什么好的方法吗?

多谢。


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


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


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


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

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

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

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

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


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


只能给你这个文档了,

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

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

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

【热门文章】
【热门文章】