如何用JavaScript获取网页中用户选中的Element对象

你可以通过window.getSelection()返回的Selection对象，结合节点遍历的方式找到选中内容所属的目标元素。核心思路是利用Selection的anchorNode（选中范围的起始节点），向上遍历DOM树，定位到你需要的父元素（比如示例中的.todo类p标签）。

修改后的完整代码 #

<div id="content">
    <p class="todo">If you don't know, you can <a href="https://google.com">google</a></p>
    <p class="todo">If you don't know, you can <a href="https://google.com">google</a></p>
    <p class="todo">If you don't know, you can <a href="https://google.com">google</a></p>
</div>
<script>
  let selectionObj = null;
  let selectedText = "";

  // 辅助函数：向上遍历找到指定类名的父元素
  function findParentElement(node, className) {
    let currentNode = node;
    // 遍历直到找到目标元素或到达document根节点
    while (currentNode && currentNode.nodeType === Node.ELEMENT_NODE) {
      if (currentNode.classList.contains(className)) {
        return currentNode;
      }
      currentNode = currentNode.parentNode;
    }
    return null;
  }

  function getCurrentSelect() {
    if (!window.getSelection()) return null;
    
    selectionObj = window.getSelection();
    selectedText = selectionObj.toString();
    
    // 如果没有选中内容，直接返回
    if (selectedText.trim() === "") {
      return { selectText: "", targetElement: null };
    }

    // 从选中起始节点向上查找.todo元素
    const targetElement = findParentElement(selectionObj.anchorNode, 'todo');
    
    return {
      selectText: selectedText,
      targetElement: targetElement
    }
  }

  window.onload = function (){
    document.body.addEventListener('mouseup', function(){
      const result = getCurrentSelect();
      console.log('选中的文字:', result.selectText);
      console.log('对应的元素:', result.targetElement);
      // 可以直接操作元素，比如高亮
      if (result.targetElement) {
        result.targetElement.style.backgroundColor = '#ffeb3b';
        // 3秒后取消高亮
        setTimeout(() => {
          result.targetElement.style.backgroundColor = '';
        }, 3000);
      }
    })
  }
</script>

关键部分说明 #

1. findParentElement辅助函数：接收起始节点和目标类名，循环向上遍历DOM树，找到第一个包含指定类名的元素。如果遍历到根节点还没找到，返回null。
2. Selection对象的anchorNode：代表选中范围开始的节点，可能是文本节点或元素节点，所以我们在遍历的时候先判断nodeType === Node.ELEMENT_NODE，确保处理的是元素节点。
3. 空选中判断：如果用户只是点击页面没有选中文字，直接返回空内容和null，避免无效操作。

这样你就能在选中文字时，同时获取到对应的.todo元素，即使页面有多个相同结构的元素也能准确区分。

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