获取特定类元素的parentNode返回undefined的问题排查

核心问题原因 #

你看到parentNode返回undefined，是因为当前捕获到的<ytd-thumbnail-overlay-time-status-renderer>节点还未被插入到DOM树中——MutationObserver的addedNodes会包含刚被创建但尚未挂载到父元素的节点，此时它还没有父节点。

另外你的代码里node.id != null的判断完全冗余，目标节点本身就没有id，这个判断不仅没用，还可能误过滤其他有效节点，建议直接移除。

修正后的代码方案 #

直接用closest()方法让目标节点向上查找最近的<ytd-thumbnail>祖先元素，同时增加节点挂载状态检查，确保节点已加入DOM后再处理：

const onMutation = (mutations) => {
  for (const { addedNodes } of mutations) {
    for (const node of addedNodes) {
      // 只处理元素节点，跳过文本/注释等节点
      if (node.nodeType !== Node.ELEMENT_NODE) continue;
      
      // 精准定位带SHORTS标识的覆盖层节点
      if (node.tagName === 'YTD-THUMBNAIL-OVERLAY-TIME-STATUS-RENDERER' && node.getAttribute('overlay-style') === 'SHORTS') {
        // 用requestAnimationFrame确保DOM更新完成
        requestAnimationFrame(() => {
          // 跨层级找到最近的ytd-thumbnail父元素
          const thumbnail = node.closest('ytd-thumbnail');
          if (thumbnail) {
            // 进一步找到对应的视频条目容器
            const videoItem = thumbnail.closest('ytd-video-renderer, ytd-grid-video-renderer');
            if (videoItem) {
              videoItem.remove();
              console.log('已移除SHORTS视频:', videoItem);
            }
          }
        });
      }
    }
  }
}

const observe = () => {
  const mo = new MutationObserver(onMutation);
  mo.observe(document, {
    subtree: true,
    childList: true,
  });
}

observe();

关键优化点 #

• 移除冗余的node.id != null判断，避免误过滤节点
• 改用tagName+overlay-style属性定位目标，比className更稳定（YouTube的动态className经常变化）
• 用closest()替代parentNode，可以直接跨层级找到目标祖先元素，无需逐层向上找
• 用requestAnimationFrame确保DOM更新完成后再处理，避免节点未挂载导致的查找失败
• 取消了每次mutation都断开再重新观察的操作，防止遗漏中间的DOM变化

内容的提问来源于stack exchange，提问作者Albert bayazidi