如何获取浏览器中通过Ctrl选中的表格多个<td>元素？

Firefox的Ctrl点击选中效果属于浏览器原生的选择行为，没有直接的selectedChildren这类DOM属性，但可以通过Selection API来获取这些被选中的元素，以下是两种可行方案：

• 方案一：遍历表格内所有并筛选选中项
  适合表格内数量不多的场景，逻辑简单直观：

  const myTable = document.getElementById("myTable");
  const allTDs = myTable.querySelectorAll("td");
  const selection = document.getSelection();
  const selectedTDs = Array.from(allTDs).filter(td => {
    // 第二个参数true表示包含部分选中的节点（点击<td>属于全选，用false也可）
    return selection.containsNode(td, true);
  });
  // selectedTDs即为被选中的<td>元素数组
  

• 方案二：从Selection对象直接提取选中元素
  适合数量较多的场景，效率更高：

  const selection = document.getSelection();
  const selectedTDs = [];
  for (let i = 0; i < selection.rangeCount; i++) {
    const range = selection.getRangeAt(i);
    const targetTDs = range.commonAncestorContainer.querySelectorAll("td");
    Array.from(targetTDs).forEach(td => {
      if (range.intersectsNode(td) && !selectedTDs.includes(td)) {
        selectedTDs.push(td);
      }
    });
  }
  

额外提示：原生选中效果的浏览器兼容性较差，若需要跨浏览器统一的多选体验，建议自行实现Ctrl点击的选中逻辑（比如给选中的添加自定义类名），这样不仅兼容性更好，也能更便捷地获取选中元素。

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