如何使用window.getSelection获取选中区域的所有元素？

我来帮你搞定这个问题！你已经能获取共同祖先元素了，要拿到所有被选中的元素，我们可以借助window.getSelection()和DOM遍历的API来实现。

方法一：使用TreeWalker高效遍历 #

TreeWalker是浏览器提供的专门用来遍历DOM节点的工具，能帮我们快速筛选出符合条件的元素：

console.clear();
// 给可编辑区域绑定mouseup事件
document.querySelector('div[contenteditable="true"]').addEventListener('mouseup', () => {
  const selection = window.getSelection();
  // 没有选中内容时直接返回，避免报错
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const selectedElements = [];
  
  // 创建TreeWalker，只遍历元素节点
  const treeWalker = document.createTreeWalker(
    range.commonAncestorContainer,
    NodeFilter.SHOW_ELEMENT,
    {
      acceptNode: function(node) {
        // 判断节点是否完全被选中（第二个参数true表示完全包含）
        if (range.containsNode(node, true)) {
          return NodeFilter.FILTER_ACCEPT;
        }
        // 如果是部分选中的节点，我们也可以选择纳入，把上面的判断换成range.intersectsNode(node)即可
        return NodeFilter.FILTER_SKIP;
      }
    }
  );

  // 遍历所有符合条件的节点
  let currentNode;
  while (currentNode = treeWalker.nextNode()) {
    selectedElements.push(currentNode);
  }

  console.log('所有完全选中的元素:', selectedElements);
});

方法二：手动递归遍历子节点 #

如果你需要更灵活的控制逻辑，也可以手动递归遍历共同祖先的子节点，筛选出选中的元素：

// 定义一个递归函数获取选中元素
function getSelectedElements(range) {
  const elements = [];

  const traverseNode = (node) => {
    // 只处理元素节点
    if (node.nodeType !== Node.ELEMENT_NODE) return;

    // 判断节点是否完全被选中
    if (range.containsNode(node, true)) {
      elements.push(node);
    } 
    // 如果节点部分被选中，继续遍历它的子节点
    else if (range.intersectsNode(node)) {
      for (const child of node.childNodes) {
        traverseNode(child);
      }
    }
  };

  traverseNode(range.commonAncestorContainer);
  return elements;
}

// 使用示例
document.querySelector('div[contenteditable="true"]').addEventListener('mouseup', () => {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  
  const range = selection.getRangeAt(0);
  const selectedElements = getSelectedElements(range);
  console.log('选中的元素:', selectedElements);
});

关键说明 #

• range.containsNode(node, true)：第二个参数为true时，只有当节点完全被包含在选中范围内才会被纳入；如果设为false，则会包含部分选中的节点。
• range.intersectsNode(node)：判断节点是否和选中范围有交集，适合处理部分选中的场景。
• 记得先判断selection.rangeCount，避免没有选中内容时出现错误。

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