如何在YouTube缩略图元素数组变化/新增时触发代码执行？

嘿，我懂你不想用setInterval这种轮询方式来监听YouTube缩略图元素集合的变化——确实，轮询既不优雅，还会平白消耗资源。其实用原生的MutationObserver API就能完美解决这个问题，它是W3C标准的DOM变化监听方案，能在目标元素发生新增、移除或修改时自动触发回调，完全不用定时轮询。

具体怎么实现？ #

首先得找准监听的范围：YouTube的视频列表一般都嵌套在固定的父容器里（比如ytd-item-section-renderer或ytd-grid-renderer），先定位这个父容器，缩小监听范围能提升性能。然后用MutationObserver监听这个容器的子元素变化，每次变化时再去获取最新的缩略图数组就行。

示例代码 #

// 先找到视频列表的父容器（根据YouTube页面结构调整，这是常见的容器选择器）
const videoListContainer = document.querySelector('ytd-item-section-renderer');

// 配置监听选项：监听子元素的新增/移除，以及子树的变化
const observerConfig = {
  childList: true,
  subtree: true
};

// 创建Observer实例，定义变化发生时的回调
const thumbnailObserver = new MutationObserver((mutations) => {
  // 每次DOM变化后，获取最新的缩略图元素数组
  const thumbnailLinks = document.querySelectorAll(".yt-simple-endpoint.inline-block.style-scope.ytd-thumbnail");
  
  // 这里执行你的自定义代码，比如判断数组长度变化、处理新加载的视频等
  console.log("当前缩略图数量：", thumbnailLinks.length);
  // 你的业务逻辑写在这里...
});

// 启动监听
thumbnailObserver.observe(videoListContainer, observerConfig);

// 后续如果需要停止监听，调用这个：
// thumbnailObserver.disconnect();

为什么这比SetInterval好？ #

• 性能拉满：只有当DOM真的发生变化时才会触发回调，不会像轮询那样不管有没有变化都定时跑一遍，节省CPU资源。
• 响应更及时：DOM变化的瞬间就能触发逻辑，不会有轮询间隔带来的延迟。
• 符合Web标准：这是官方推荐的DOM变化监听方案，比自己写轮询靠谱多了。

小提醒 #

• 父容器的选择要精准：如果YouTube页面结构更新，可能需要调整videoListContainer的选择器，确保它是包含所有视频缩略图的最外层容器，避免监听范围太大导致不必要的回调。
• 可以加个防抖：如果一次DOM更新会触发多次mutation回调，给你的业务逻辑加个防抖函数，避免重复执行。

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