如何获取对所选内容的 DOM 元素的引用

Question

我有一个选择，例如：

   const sel = document.getSelection();

跨越一个或多个 HTML 元素或其中的一部分。 找不到获取对这些元素的引用的方法。 我发现的最接近的是：

  sel.anchorNode.cloneNode()

返回节点的文本，我想要的是对 DOM 中 HTML 节点的引用。 是否可以？ :-)

Answer 1

要获取对所选内容一部分的 HTML 元素的引用，您可以使用

Range

对象，它提供了操作所选内容的方法。

Range

对象可以从

Selection

对象获取，并提供对选择的开始和结束节点的访问，以及迭代选择中的元素的能力。

这是一个代码片段，

const sel = document.getSelection();

if (sel.rangeCount > 0) {
    const range = sel.getRangeAt(0);

    let elements = [];

    function getElementsInRange(node) {
        if (node.nodeType === Node.ELEMENT_NODE) {
            elements.push(node);
        }
        for (let child = node.firstChild; child; child = child.nextSibling) {
            if (range.intersectsNode(child)) {
                getElementsInRange(child);
            }
        }
    }

    getElementsInRange(range.commonAncestorContainer);

    console.log(elements);
}

通过这种方式，您可以获得对属于所选内容的所有 HTML 元素的引用。