如何获取选中区域对应的DOM元素引用？

当然可行，你可以通过Selection对象关联的Range来获取覆盖选中区域的DOM元素引用，以下是具体实现方法：

方法1：获取所有被选中区域覆盖的元素（包含部分选中的元素） #

利用Range的getClientRects()获取选中区域的所有边界矩形，再通过document.elementsFromPoint()获取每个矩形区域内的元素，去重后得到所有涉及的DOM元素：

const sel = document.getSelection();
if (sel.rangeCount > 0) {
  const range = sel.getRangeAt(0);
  const rects = range.getClientRects();
  const coveredElements = new Set();

  rects.forEach(rect => {
    // 取矩形中心坐标获取元素，确保覆盖到该区域内的元素
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    const elementsInRect = document.elementsFromPoint(centerX, centerY);
    elementsInRect.forEach(el => coveredElements.add(el));
  });

  // 转换为数组使用，里面是原DOM节点引用
  const result = Array.from(coveredElements);
  console.log(result);
}

方法2：获取选中起始/结束节点所在元素及中间元素 #

如果选中区域是连续的元素范围，可以从起始和结束节点向上定位到元素节点，再遍历收集中间的元素：

const sel = document.getSelection();
if (sel.rangeCount > 0) {
  const range = sel.getRangeAt(0);
  let startElement = range.startContainer;
  let endElement = range.endContainer;

  // 处理文本节点的情况，切换到其父元素
  if (startElement.nodeType === Node.TEXT_NODE) {
    startElement = startElement.parentElement;
  }
  if (endElement.nodeType === Node.TEXT_NODE) {
    endElement = endElement.parentElement;
  }

  const elements = [];
  let current = startElement;
  while (current) {
    elements.push(current);
    if (current === endElement) break;
    current = current.nextElementSibling;
  }

  console.log(elements);
}

注意：anchorNode只是选中操作的起始节点，可能是文本节点，cloneNode()返回的是该节点的克隆副本，并非原DOM树中的节点引用，而上面的方法直接获取的是原DOM树中的元素节点。

内容的提问来源于stack exchange，提问作者Juan Lanus