如何通过JavaScript获取Node节点的X/Y坐标？

对于非Element类型的Node（比如selection.focusNode返回的文本节点），无法直接调用getBoundingClientRect()，但可以通过以下可靠方法获取其位置的top和bottom属性：

方案1：利用Range对象精准定位 #

这是最推荐的方式，Range可以选中任意节点（包括文本节点的全部或部分内容），并返回对应的区域坐标：

const selection = window.getSelection();
if (selection.focusNode) {
  // 创建包含整个focusNode的Range
  const range = document.createRange();
  range.selectNode(selection.focusNode);
  // 获取目标位置信息
  const rect = range.getBoundingClientRect();
  // 这里即可使用rect.top和rect.bottom来创建覆盖层
  console.log(rect.top, rect.bottom);
}

如果需要定位光标所在的具体片段（而非整个节点），可以调整Range的起止位置：

const selection = window.getSelection();
if (selection.focusNode) {
  const range = document.createRange();
  range.setStart(selection.focusNode, selection.focusOffset);
  range.setEnd(selection.focusNode, selection.focusOffset);
  const rect = range.getBoundingClientRect();
  console.log(rect.top, rect.bottom);
}

方案2：借助父Element（仅适用于文本节点） #

如果focusNode是文本节点，可以先获取其父Element，但这种方法无法精准定位文本节点的具体位置，仅适用于粗略场景：

const selection = window.getSelection();
const focusNode = selection.focusNode;
if (focusNode?.nodeType === Node.TEXT_NODE) {
  const parentEl = focusNode.parentElement;
  if (parentEl) {
    const parentRect = parentEl.getBoundingClientRect();
    // 基于父元素位置做粗略处理
  }
}

核心结论：处理非Element类型的Node位置，优先使用Range对象，它能准确返回节点对应的页面坐标，完全满足添加覆盖层的需求。

内容的提问来源于stack exchange，提问作者Clement Hoang