登录

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

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

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

</p>

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

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

多谢。

# JavaScript
巴扎黑巴扎黑2197 天前390 次浏览

全部回复(6) 我要回复

  • 阿神

    阿神2017-04-11 12:13:28

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

    回复
    0
  • 天蓬老师

    天蓬老师2017-04-11 12:13:28

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

    回复
    0
  • PHP中文网

    PHP中文网2017-04-11 12:13:28

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

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

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

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

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

    回复
    0
  • ringa_lee

    ringa_lee2017-04-11 12:13:28

    只能给你这个文档了,

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

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

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

    回复
    0
  • ringa_lee

    ringa_lee2017-04-11 12:13:28

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

    回复
    0
  • 迷茫

    迷茫2017-04-11 12:13:28

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

    回复
    0
  • 取消回复发送