如何从SVG向下遍历DOM找到不同父级下的最近<a>标签？

核心思路 #

先通过唯一稳定的SVG节点定位到用户模块的共同顶级父容器，再在容器内筛选目标个人主页链接，全程避开频繁变更的混淆类名，只依赖DOM结构逻辑和稳定属性。

实现方案 #

1. 定位共同父容器

从SVG节点向上遍历，找到包裹整个用户模块的最外层容器（即你提供的DOM结构中最顶部的<div>）。这里提供两种方式：

方式A：固定层级向上遍历（适合结构稳定场景）

const svg = node.querySelector("svg");
if (!svg) return;

// 从SVG出发，向上遍历到共同父容器（对应你提供的DOM结构层级）
const commonParent = svg.closest('a').parentElement.parentElement;

方式B：动态查找（更稳健，适配FB层级微调）

通过循环向上查找，直到找到包含至少两个用户主页链接的容器：

function findUserModuleContainer(startNode) {
  let current = startNode;
  while (current) {
    const userLinks = current.querySelectorAll('a[href^="/user/"]');
    if (userLinks.length >= 2) return current;
    current = current.parentElement;
  }
  return null;
}

const svg = node.querySelector("svg");
if (!svg) return;
const commonParent = findUserModuleContainer(svg);
if (!commonParent) return;

2. 筛选目标链接

在共同父容器内，排除SVG所在的上方链接，找到下方的目标链接：

方案1：通过链接地址匹配

利用两个链接href一致的特征，排除包含SVG的那个链接：

const targetHref = svg.closest('a').href;
const profileEle = Array.from(commonParent.querySelectorAll('a[href^="/user/"]'))
  .find(link => link.href === targetHref && !link.contains(svg));

方案2：通过文本内容筛选

下方链接包含用户名文本，而上方链接只有SVG无可见文本，以此区分：

const profileEle = Array.from(commonParent.querySelectorAll('a[href^="/user/"]'))
  .find(link => link.textContent.trim() !== '');

完整代码示例 #

function getTargetProfileLink(node) {
  const svg = node.querySelector("svg");
  if (!svg) return null;

  // 动态查找用户模块容器
  function findUserModuleContainer(startNode) {
    let current = startNode;
    while (current) {
      const userLinks = current.querySelectorAll('a[href^="/user/"]');
      if (userLinks.length >= 2) return current;
      current = current.parentElement;
    }
    return null;
  }

  const commonParent = findUserModuleContainer(svg);
  if (!commonParent) return null;

  // 筛选目标链接（优先用文本内容方式）
  return Array.from(commonParent.querySelectorAll('a[href^="/user/"]'))
    .find(link => link.textContent.trim() !== '');
}

// 调用示例
const profileEle = getTargetProfileLink(node);

内容的提问来源于stack exchange，提问作者FB Prints