分步拆解：Bilibili 批量取消关注的 JavaScript 脚本开发实战

摘要：本文通过浏览器控制台脚本实现B站批量取关功能，解决手动操作效率低的问题。全程采用原生JavaScript，无需第三方库，适合前端初学者实战学习。

---

一、需求分析与技术方案

背景痛点：

• 用户关注列表积累大量无效账号
• 手动取关需多次点击确认，耗时耗力

技术方案：

1. 基于浏览器DOM操作
2. 模拟用户点击行为
3. 异步延时防止请求阻塞

---

二、核心代码分步实现

步骤1：获取关注列表容器

const listContainer = document.querySelector('.be-list.relation-list');
if (!listContainer) throw new Error("未找到关注列表");

解析：通过CSS选择器定位关注列表的DOM节点。

步骤2：提取所有关注卡片

const cards = Array.from(listContainer.querySelectorAll('.list-item'));
if (cards.length === 0) throw new Error("关注列表为空");

技巧：Array.from()将NodeList转为可操作数组。

步骤3：遍历点击取消按钮

cards.forEach((card, index) => {
  const cancelBtn = card.querySelector('.unfollow-btn');
  if (cancelBtn) {
    setTimeout(() => {
      cancelBtn.click(); 
      console.log(`已取关第${index+1}位用户`);
    }, index * 2000); // 2秒间隔防封禁
  }
});

关键点：

• setTimeout实现操作间隔
• 日志输出实时进度

步骤4：自动处理确认弹窗

// 监听弹窗出现
new MutationObserver(() => {
  const confirmBtn = document.querySelector('.btn.confirm');
  if (confirmBtn) confirmBtn.click();
}).observe(document.body, { childList: true, subtree: true });

原理：通过MutationObserver监听DOM变化触发二次点击。

---

三、完整脚本代码

(function batchUnfollow() {
  try {
    // 1. 定位关注列表
    const container = document.querySelector('.be-list.relation-list');
    if (!container) return alert("请先打开关注列表页面");
    
    // 2. 获取所有关注卡片
    const cards = Array.from(container.querySelectorAll('.list-item'));
    if (cards.length === 0) return alert("关注列表为空");
    
    // 3. 倒序取关（避免DOM刷新导致定位失效）
    cards.reverse().forEach((card, i) => {
      setTimeout(() => {
        const btn = card.querySelector('.unfollow-btn');
        if (btn) {
          btn.click();
          console.log(`✅ 取关进度: ${i+1}/${cards.length}`);
        }
      }, i * 2500); // 2.5秒/次
    });
    
    // 4. 自动确认弹窗
    new MutationObserver(mutations => {
      mutations.forEach(mut => {
        if (mut.addedNodes.length) {
          const confirmBtn = document.querySelector('.btn.confirm');
          if (confirmBtn) confirmBtn.click();
        }
      });
    }).observe(document, { subtree: true, childList: true });
    
    alert(`开始批量取关 ${cards.length} 个账号，请勿关闭页面`);
  } catch (e) {
    console.error("执行失败:", e);
  }
})();

---

四、操作指南

1. 打开B站关注列表页：https://space.bilibili.com/你的UID/fans/follow
2. 浏览器按F12打开开发者工具
3. 进入Console面板粘贴完整代码
4. 按回车键执行脚本

执行效果：

• 终端实时打印取关进度
• 每2.5秒处理一个账号
• 自动关闭确认弹窗

---

五、注意事项

1. 频率控制：间隔低于2秒可能触发风控机制
2. 页面保持：执行期间不可切换浏览器标签页
3. 兼容性：仅在Chrome/Firefox最新版测试通过
4. 法律声明：本脚本仅用于技术学习，禁止滥用

通过此实战项目，可掌握DOM操作、事件模拟、异步控制等核心前端技能。建议根据实际页面结构调整CSS选择器参数。