一步一操作：JavaScript 实现 Bilibili 批量取关的基础教程

引言

随着关注列表日益臃肿，许多用户需要清理不再感兴趣的UP主。本教程将详细讲解如何通过浏览器控制台脚本实现批量取关操作，全程只需基础JavaScript知识，无需安装第三方工具或插件。

前置准备

1. 登录B站账号并进入关注列表页：

   https://space.bilibili.com/您的UID/fans/follow
   

2. 确保浏览器支持开发者工具（Chrome/Firefox按F12可打开）

核心代码实现

// 步骤1：获取所有关注卡片元素
const cards = Array.from(
  document.querySelectorAll('.be-dropdown-item:has(.unfollow-btn)')
);

// 步骤2：定义自动取关函数（带延时保护）
function batchUnfollow(elements, delay = 1500) {
  if (elements.length === 0) {
    console.log("✅ 取关操作已完成");
    return;
  }

  const current = elements.shift();
  current.querySelector('.unfollow-btn').click();
  
  // 处理确认弹窗
  setTimeout(() => {
    const confirmBtn = document.querySelector('.modal-footer .be-btn--primary');
    if (confirmBtn) confirmBtn.click();
  }, 500);

  // 递归执行下一个
  setTimeout(() => batchUnfollow(elements, delay), delay);
}

// 步骤3：执行取关（可修改delay值调整速度）
batchUnfollow(cards);

操作指南

1. 打开控制台：

   • Chrome/Firefox按F12 > 选择"Console"标签页
   • 手机浏览器需开启"桌面模式" 

2. 粘贴脚本：

   • 复制完整代码到控制台输入区
   • 按Enter执行

3. 监控进度：

   • 控制台实时显示取关计数
   • 页面会依次触发取关动画
   • 出现弹窗时脚本自动确认

代码解析

注意事项

1. 安全提示：

   • 全程在浏览器本地执行
   • 无需提供账号密码
   • 建议提前导出关注列表备份

2. 常见问题处理：

   // 若选择器失效可尝试备用方案
   document.querySelectorAll(
     'div[class*="item"] button:contains("取消关注")'
   )
   

   • 页面卡顿时增大delay值（2000-3000）
   • 分页场景需手动滚动加载全部关注再执行

3. 效果验证：

   • 执行后刷新关注列表检查数量变化
   • 可通过历史记录查看批量取关明细

结语

本文介绍的方法通过模拟人工操作实现批量处理，实际执行效率约15-20个/分钟。随着B站前端更新，核心选择器可能需要微调，但基本原理保持不变。操作前建议先小范围测试，确认无误后再执行全量操作。