javascript - getRangeAt(0) 返回带有 parentNode 文档片段的#text 节点

Question

我正在尝试获取选定的节点。假设我选择了所有“点击编辑”。

<span style="text-transform: lowercase">CLICK TO EDIT</span>

尝试通过以下方式获取当前选择:

var select = window.getSelection();
var range = select.getRangeAt(0).cloneRange();
var selectedNode = range.cloneContents().childNodes[0];

在某些情况下，selectedNode 是包含“单击以编辑”而不是 SPAN 元素的 #text 节点。

我想要的是包含这个文本节点的跨度。但是 selectedNode.parentNode 是一个 document-fragment，selectedNode.parentElement 是 null。

在这种情况下，我应该如何获取 span 元素？

Answer 1

此代码监听 selectionchange 事件，并获取所选文本的父元素。

document.addEventListener('selectionchange', e => {
  var selection = window.getSelection();
  var anchorNode = selection.anchorNode;
  
  if (anchorNode) {
    // This is the <span>, when you select the text
    var parentElement = anchorNode.parentElement;
    console.log(parentElement);
  }
});

<span style="text-transform: lowercase">CLICK TO EDIT</span>