如何通过document.getSelection()获取选中元素的class与id？

document.getSelection()本身返回的是选中的文本范围，要获取对应的元素，需要通过它返回的Selection对象里的范围信息来定位元素。以下是几种常见场景的实现方式：

1. 获取单个选中元素（选中内容在同一元素内） #

如果用户选中的是某一个元素内的文本，或者直接选中了整个元素，可以通过选中范围的起始/结束节点来获取对应的元素：

const selection = document.getSelection();

// 确保存在选中内容
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  // 起始节点可能是文本节点，取其父元素
  let targetElement = range.startContainer;
  if (targetElement.nodeType === Node.TEXT_NODE) {
    targetElement = targetElement.parentElement;
  }

  // 获取ID和class
  console.log('元素ID:', targetElement.id);
  console.log('元素class:', targetElement.className);
  // 若要获取数组格式的class列表，用classList
  console.log('class列表:', Array.from(targetElement.classList));
}

2. 处理跨元素选中的情况 #

如果用户选中的内容跨越了多个元素，可以获取起始、结束元素，或者遍历所有被选中的元素：

获取起始和结束元素 #

const selection = document.getSelection();

if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  
  // 处理起始元素
  let startEl = range.startContainer;
  startEl = startEl.nodeType === Node.TEXT_NODE ? startEl.parentElement : startEl;
  // 处理结束元素
  let endEl = range.endContainer;
  endEl = endEl.nodeType === Node.TEXT_NODE ? endEl.parentElement : endEl;

  console.log('起始元素ID:', startEl.id, 'class:', startEl.className);
  console.log('结束元素ID:', endEl.id, 'class:', endEl.className);
}

获取所有被选中的元素 #

如果需要拿到所有和选中范围相交的元素，可以用TreeWalker遍历公共祖先节点下的元素：

function getAllSelectedElements() {
  const selection = document.getSelection();
  const selectedElements = [];
  
  if (selection.rangeCount === 0) return selectedElements;
  
  const range = selection.getRangeAt(0);
  // 获取选中范围的公共祖先节点
  let commonAncestor = range.commonAncestorContainer;
  // 若祖先节点是文本节点，取其父元素
  commonAncestor = commonAncestor.nodeType === Node.TEXT_NODE ? commonAncestor.parentElement : commonAncestor;
  
  // 遍历所有子元素，判断是否与选中范围相交
  const treeWalker = document.createTreeWalker(
    commonAncestor,
    NodeFilter.SHOW_ELEMENT
  );
  
  let currentNode;
  while (currentNode = treeWalker.nextNode()) {
    if (range.intersectsNode(currentNode)) {
      selectedElements.push(currentNode);
    }
  }
  
  return selectedElements;
}

// 使用示例
const elements = getAllSelectedElements();
elements.forEach(el => {
  console.log(`元素ID: ${el.id}, class: ${el.className}`);
});

关键说明 #

• Selection对象的rangeCount属性表示当前选中的范围数量，通常为1（除非用户按住Ctrl多选）
• startContainer/endContainer可能是文本节点（当选中的是文本内容时），所以需要判断nodeType，取parentElement得到对应的DOM元素
• classList是DOM元素的属性，返回一个DOMTokenList对象，可以用Array.from()转为数组方便操作

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