如何在JavaScript中遍历选中范围内的所有DOM节点？

要获取页面选中范围内的所有节点（包括部分选中的文本/元素节点），可以通过Range API结合TreeWalker或手动迭代实现。以下是解决思路和可行代码：

核心思路 #

1. 先获取当前选中的Range对象，处理基准节点（baseNode）和范围节点（extentNode）的顺序（因为选中方向可能导致两者顺序颠倒）。
2. 通过节点位置判断，筛选出所有与选中范围相交的节点（完全包含或部分覆盖的节点）。

方法一：使用TreeWalker精准筛选 #

TreeWalker可以遍历DOM树并过滤符合条件的节点，关键是设置正确的过滤规则判断节点是否与选中范围相交：

function getSelectedNodes() {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return [];
  
  const targetRange = selection.getRangeAt(0);
  const resultNodes = [];

  // 创建TreeWalker，遍历元素节点和文本节点
  const treeWalker = document.createTreeWalker(
    document.documentElement, // 从根节点开始遍历
    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
    {
      acceptNode(node) {
        // 跳过无法选中的节点（如注释、处理指令）
        if (node.nodeType !== Node.ELEMENT_NODE && node.nodeType !== Node.TEXT_NODE) {
          return NodeFilter.FILTER_REJECT;
        }

        // 创建节点的完整范围，判断是否与选中范围相交
        const nodeRange = document.createRange();
        try {
          nodeRange.selectNodeContents(node);
        } catch (e) {
          return NodeFilter.FILTER_REJECT;
        }

        if (targetRange.intersectsNode(node)) {
          resultNodes.push(node);
          // 继续遍历子节点（如果是元素节点）
          return NodeFilter.FILTER_ACCEPT;
        }
        return NodeFilter.FILTER_SKIP;
      }
    }
  );

  // 触发遍历
  while (treeWalker.nextNode()) {}
  return resultNodes;
}

为什么之前用TreeWalker失败？ #

大概率是这几个原因：

• 没有同时遍历文本节点和元素节点（默认可能只选了元素）；
• 过滤条件错误，没有正确判断节点与选中范围的交集；
• 遍历的根节点范围太小，导致部分选中节点被遗漏。

方法二：手动迭代节点（更灵活） #

如果TreeWalker的规则不好把控，可以手动从起始节点遍历到结束节点，逐个收集符合条件的节点：

function getSelectedNodesManual() {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return [];
  
  const range = selection.getRangeAt(0);
  const { startContainer, endContainer } = range;
  const nodes = [];

  // 判断起始节点是否在结束节点之前，处理选中方向颠倒的情况
  const isStartBeforeEnd = startContainer.compareDocumentPosition(endContainer) & Node.DOCUMENT_POSITION_FOLLOWING;
  const [startNode, endNode] = isStartBeforeEnd ? [startContainer, endContainer] : [endContainer, startContainer];

  // 收集起始节点到结束节点路径上的所有节点
  function collectNodes(node) {
    nodes.push(node);
    if (node === endNode) return true;

    // 先遍历子节点
    if (node.firstChild) {
      if (collectNodes(node.firstChild)) return true;
    }

    // 遍历兄弟节点
    let sibling = node.nextSibling;
    while (sibling) {
      if (collectNodes(sibling)) return true;
      sibling = sibling.nextSibling;
    }

    // 回到父节点的兄弟节点
    while (node.parentNode && node !== startNode) {
      node = node.parentNode;
      sibling = node.nextSibling;
      if (sibling) {
        if (collectNodes(sibling)) return true;
      }
    }
    return false;
  }

  collectNodes(startNode);
  // 最后过滤出确实在选中范围内的节点（避免路径上的无关节点）
  return nodes.filter(node => range.intersectsNode(node));
}

针对Stack Overflow高亮场景的补充 #

如果要实现类似Stack Overflow的选中高亮，不需要单独收集所有节点——直接对选中的Range创建高亮元素包裹即可：

function highlightSelection() {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;
  
  const range = selection.getRangeAt(0);
  const highlight = document.createElement('span');
  highlight.style.backgroundColor = 'yellow';
  
  // 将选中范围的内容包裹到高亮元素中
  try {
    range.surroundContents(highlight);
  } catch (e) {
    // 处理跨元素选中的情况，拆分Range逐个包裹
    const fragment = range.extractContents();
    highlight.appendChild(fragment);
    range.insertNode(highlight);
  }
}

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