如何获取DocumentFragment内的元素及选中内容对应的原DOM元素

你之前使用cloneContents()的问题在于，它会创建选中内容的克隆副本，这些副本属于临时的DocumentFragment，和原DOM树完全脱离，自然无法获取到原元素的父节点或真实样式。下面是直接获取原DOM中选中内容对应元素的解决方案：

核心思路 #

直接操作选中范围（Range）对应的真实节点，而非克隆副本：

1. 区分文本节点和元素节点：选中单个元素的部分文本时，选中的起始/结束节点是文本节点，需要取其对应的父元素。
2. 遍历选中范围内所有涉及的元素（包括完全选中和部分选中的），并去重避免重复。

实现代码 #

const selection = window.getSelection();
if (selection.rangeCount === 0) {
  console.log("未选中任何内容");
  return;
}
const range = selection.getRangeAt(0);

// 获取选中范围内所有真实DOM元素的函数
function getSelectedTargetElements(range) {
  const uniqueElements = new Set();

  // 处理起始/结束节点：文本节点取父元素，元素节点直接加入
  const handleNode = (node) => {
    if (node.nodeType === Node.TEXT_NODE) {
      const parentEl = node.parentElement;
      parentEl && uniqueElements.add(parentEl);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      uniqueElements.add(node);
    }
  };

  handleNode(range.startContainer);
  handleNode(range.endContainer);

  // 遍历选中范围覆盖的所有元素节点（包括中间嵌套元素）
  const treeWalker = document.createTreeWalker(
    range.commonAncestorContainer,
    NodeFilter.SHOW_ELEMENT,
    {
      acceptNode: (node) => {
        // 判断元素是否与选中范围有交集
        return range.intersectsNode(node) 
          ? NodeFilter.FILTER_ACCEPT 
          : NodeFilter.FILTER_REJECT;
      }
    }
  );

  let currentEl;
  while ((currentEl = treeWalker.nextNode())) {
    uniqueElements.add(currentEl);
  }

  return Array.from(uniqueElements);
}

// 获取元素并调用getComputedStyle
const selectedElements = getSelectedTargetElements(range);
selectedElements.forEach(element => {
  const computedStyle = window.getComputedStyle(element);
  console.log(`元素：${element.tagName}，样式：`, computedStyle);
});

关键说明 #

• 用Set存储元素自动去重，避免同一元素被多次添加（比如选中单个元素的部分文本时，起始和结束节点的父元素是同一个）。
• TreeWalker用于遍历共同祖先容器下的所有元素，通过intersectsNode判断元素是否和选中范围有交集，精准筛选出涉及的元素。
• 直接操作原DOM节点，确保可以正确调用window.getComputedStyle()获取真实样式。

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