如何获取window.getSelection().anchorNode对应元素的class、id等属性？

嘿，这个场景我之前做富文本编辑器的时候经常碰到！你说的window.getSelection().anchorNode返回文本节点的问题，核心解决思路就是从文本节点向上回溯，找到它的父元素节点——毕竟文本节点本身是没有id、class这些属性的，得找包裹它的那个元素。

基础解决方案：直接取父元素 #

当用户选中文本时，anchorNode几乎都是文本节点（nodeType为3），这时候用parentNode就能直接拿到它的父元素，然后就能访问id、className这些属性了。给你写个针对你示例的代码：

// 获取当前选中对象
const selection = window.getSelection();

// 确保有选中内容
if (selection.rangeCount > 0) {
  const anchorNode = selection.anchorNode;
  
  // 处理两种情况：如果是文本节点就取父元素，否则直接用元素节点
  const parentElement = anchorNode.nodeType === Node.TEXT_NODE 
    ? anchorNode.parentNode 
    : anchorNode;
  
  // 现在就能拿到你要的属性啦
  const elementId = parentElement.id;
  const elementClass = parentElement.className;
  
  // 对应你的示例判断起始位置
  if (elementId === 'word1') {
    console.log('起始选中位置在#word1里');
  } else if (elementId === 'word2') {
    console.log('起始选中位置在#word2里');
  }
}

进阶：多层嵌套时找特定元素 #

如果你的文本节点嵌套在多层元素里（比如<div class="wrap"><span id="word1">Aaa</span></div>），你可能需要循环往上找，直到找到带id的元素。可以写个小工具函数：

// 从节点向上找第一个带id的元素
function findFirstElementWithId(startNode) {
  let currentNode = startNode;
  
  // 先找到最近的元素节点
  while (currentNode && currentNode.nodeType !== Node.ELEMENT_NODE) {
    currentNode = currentNode.parentNode;
  }
  
  // 再往上找带id的元素
  while (currentNode && !currentNode.id) {
    currentNode = currentNode.parentNode;
  }
  
  return currentNode; // 找到返回元素，找不到返回null
}

// 使用示例
const selection = window.getSelection();
if (selection.rangeCount > 0) {
  const targetElement = findFirstElementWithId(selection.anchorNode);
  if (targetElement) {
    console.log('起始选中的目标元素ID：', targetElement.id);
  } else {
    console.log('没找到带ID的父元素');
  }
}

小提示 #

• 记得先判断selection.rangeCount > 0，避免用户没选内容时出错；
• Node.TEXT_NODE是常量3，你也可以直接写3，但用常量可读性更好；
• 如果要找特定class的元素，把上面工具函数里的!currentNode.id改成!currentNode.classList.contains('your-class')就行。

内容的提问来源于stack exchange，提问作者Örom Loidl