JavaScript中获取DOM节点位置的策略与实践

// 假设有一个元素节点
const myElement = document.getElementById('myDiv');

if (myElement && myElement.nodeType === Node.ELEMENT_NODE) {
  const rect = myElement.getBoundingClientRect();
  console.log('元素位置信息:', rect);
  console.log('距离视口顶部:', rect.top);
  console.log('距离视口左侧:', rect.left);
  console.log('宽度:', rect.width);
  console.log('高度:', rect.height);
}

// 假设 focusNode 是一个 Text 节点
const focusNode = window.getSelection().focusNode;

let positionRect = null;

// 检查节点类型
if (focusNode && focusNode.nodeType === Node.ELEMENT_NODE) {
  // 如果是元素节点，直接使用 getBoundingClientRect()
  positionRect = focusNode.getBoundingClientRect();
} else if (focusNode && focusNode.parentElement) {
  // 如果是非元素节点，获取其父元素的位置
  positionRect = focusNode.parentElement.getBoundingClientRect();
}

if (positionRect) {
  console.log('通过父元素获取的位置:', positionRect);
} else {
  console.log('无法获取节点位置。');
}

/**
 * 获取文本节点的精确位置信息。
 * @param {Node} textNode - 要获取位置的文本节点。
 * @returns {DOMRect | null} - 文本节点的DOMRect对象，如果不是文本节点则返回null。
 */
function getTextNodeRect(textNode) {
  if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
    console.warn("getTextNodeRect: 输入的不是一个文本节点。");
    return null;
  }

  const range = document.createRange();
  // 选择整个文本节点的内容
  range.selectNodeContents(textNode);
  return range.getBoundingClientRect();
}

/**
 * 获取文本节点内某个偏移量的精确位置信息。
 * 例如，获取光标在文本节点内的位置。
 * @param {Node} textNode - 文本节点。
 * @param {number} offset - 文本节点内的字符偏移量。
 * @returns {DOMRect | null} - 偏移量处的DOMRect对象。
 */
function getCaretRect(textNode, offset) {
  if (!textNode || textNode.nodeType !== Node.TEXT_NODE || offset < 0 || offset > textNode.length) {
    console.warn("getCaretRect: 输入参数无效。");
    return null;
  }

  const range = document.createRange();
  // 设置Range的起始和结束点为文本节点内的指定偏移量
  range.setStart(textNode, offset);
  range.setEnd(textNode, offset);
  return range.getBoundingClientRect();
}

// 示例：获取当前选区焦点节点的精确位置
const currentFocusNode = window.getSelection().focusNode;

if (currentFocusNode && currentFocusNode.nodeType === Node.TEXT_NODE) {
  const textRect = getTextNodeRect(currentFocusNode);
  console.log('通过Range获取的文本节点整体位置:', textRect);

  // 假设光标在文本节点的中间
  const caretOffset = Math.floor(currentFocusNode.length / 2);
  const caretRect = getCaretRect(currentFocusNode, caretOffset);
  console.log('通过Range获取的文本节点内光标位置:', caretRect);
} else {
  console.log('当前焦点不是文本节点，或无法获取。');
}

/**
 * 获取任意DOM节点在视口中的位置信息。
 * @param {Node} node - 要获取位置的DOM节点。
 * @returns {DOMRect | null} - 节点的DOMRect对象，如果无法获取则返回null。
 */
function getNodeRect(node) {
  if (!node) {
    return null;
  }

  // 1. 如果是元素节点，直接使用 getBoundingClientRect()
  if (node.nodeType === Node.ELEMENT_NODE) {
    return node.getBoundingClientRect();
  }

  // 2. 如果是文本节点，使用 Range 对象获取精确位置
  if (node.nodeType === Node.TEXT_NODE) {
    const range = document.createRange();
    range.selectNodeContents(node); // 选择整个文本节点内容
    return range.getBoundingClientRect();
  }

  // 3. 对于其他类型的节点（如注释节点等），尝试获取其父元素的位置
  // 注意：这种方法可能不精确，且并非所有节点都有 parentElement
  if (node.parentElement) {
    return node.parentElement.getBoundingClientRect();
  }

  // 无法获取位置
  return null;
}

// 示例用法
const selection = window.getSelection();
if (selection.focusNode) {
  const rect = getNodeRect(selection.focusNode);
  if (rect) {
    console.log('通用函数获取的节点位置:', rect);
    // 例如，在节点位置显示一个提示
    // const overlay = document.createElement('div');
    // overlay.style.position = 'fixed';
    // overlay.style.left = `${rect.left}px`;
    // overlay.style.top = `${rect.top}px`;
    // overlay.style.width = `${rect.width}px`;
    // overlay.style.height = `${rect.height}px`;
    // overlay.style.border = '1px solid red';
    // overlay.style.pointerEvents = 'none';
    // document.body.appendChild(overlay);
  } else {
    console.log('无法获取当前焦点节点的位置。');
  }
}