最近刷抖音刷到关注列表两千多个翻半天全是广告号和卖课号想清理一下又不想一个个点。网上搜了一圈要么是收费软件要么是让你装各种乱七八糟的插件我实在不放心。后来想着抖音有网页版既然有网页版那DOM结构就可以操作于是自己在浏览器控制台里写了个批量取关的小脚本。实测下来核心代码确实就几行整个流程跑完也就一两分钟。这篇文章把原理、完整步骤、踩过的坑还有代码失效后的排查思路都写清楚给有同样需求的朋友一个参考。1. 先搞清楚这件事的本质为什么要用JS而不是找工具先说结论所有批量操作类需求只要目标平台有网页版用浏览器控制台跑JS永远是最轻量、最可控的方案。有些人可能会问淘宝、拼多多上一堆抖音粉丝清理服务几块钱就能买为什么非要自己写我个人的看法是这类第三方服务的账号安全风险完全不可控。你要么把账号密码交给对方要么扫对方的登录二维码等于把账号的完整权限交出去。群控脚本背后是真人还是机器人、会不会拿你的号做别的事你根本不知道。相比之下自己打开F12写几行脚本全程在自己浏览器里执行不经过任何中间服务器起码账号维度上是干净的。那为什么选JS因为浏览器控制台天然支持JavaScript不需要安装任何开发环境不需要配置Node.js也不需要下载任何额外的脚本工具。更关键的是运行在页面环境里的JS可以直接操作页面上的DOM元素——这就像是拿到了页面的遥控器你手动能点到的按钮JS脚本也能帮你点而且可以按循环批量执行。至于为什么标题说5行并不是为了玩噱头。在实际操作中核心逻辑拆开确实只有5行左右选中所用的关注按钮元素过滤掉已经取关的、不用处理的节点逐个进行点击确认弹窗处理循环执行加上延时后面可能因为抖音页面结构调整多几行程但核心思想就是这个。理解了这5行你以后清理任何平台的关注列表、批量删除内容都能举一反三。2. 动手之前的准备工作环境要求与注意事项写代码之前先确认你的环境没问题。这一步看着基础但实际操作中很多人卡在这里。2.1 环境要求电脑端浏览器Chrome、Edge、Firefox均可推荐Chrome或EdgeF12开发者工具的手感最顺手一个抖音网页版账号直接访问抖音官网扫码登录即可推荐准备一个小号如果你是第一次操作强烈建议先用不重要的账号测试确认脚本行为符合预期再上主号2.2 先手动测试一下在写任何脚本之前先手动确认两件事第一进入抖音网页版关注页面看看关注列表是怎么加载的。正常情况下列表是滚动懒加载的模式——你往下滚一屏就多加载一屏内容只有滚动到底部才会露出更多关注按钮。第二随便找一个已关注的账号鼠标移上去看看按钮的文案和样式是什么。在F12控制台里选中那个按钮看一下它的class名、Parent结构这是后面写选择器的依据。提示不同时期抖音前端改动后的按钮结构不同有的叫已关注有的是取消关注有的图标是√样式。一定要以你自己看到的DOM为准我代码里的选择器只是参考遇到失效时按第5章的方法重新定位即可。2.3 安全使用的前提我得把话说在前面。批量脚本本质上是自动化操作它违反了平台正常用户行为的假设。所以控制频率单次批量取关不要超过合理范围避免接口被限流控制量级我建议一次处理50~100个就停一下隔天再继续不要用于商业用途给别人做批量清粉服务一旦被平台识别责任都在自己脚本自己写自己用不要在公开渠道传播可执行的完整工具包这篇文章讲的是原理和思路这些不是空话我在实测过程中确实遇到过连续取关一两百个之后接口开始返回异常的情况。到时候不光是取关失败连正常浏览都会受影响得不偿失。3. 核心代码详解这5行JS到底做了什么这个脚本的核心我拆成三个版本讲最小可运行版、加延时防限流版、完整版。理解最小版能帮你建立心智模型用完整版能让你在实际操作中少踩坑。3.1 最小可运行版打开抖音网页版我的关注页面滚动加载出一部分关注列表后在控制台输入// 选中所有已关注状态的按钮 const btnList document.querySelectorAll([class*follow]); // 过滤出确认为已关注的节点 const targetList Array.from(btnList).filter(btn btn.textContent.includes(已关注)); // 循环点击 for (const btn of targetList) { btn.click(); }这代码一共4步选中、过滤、筛选、点击。看起来精简但实际跑的时候你可能遇到三个问题问题一btn.click()触发的是鼠标点击事件但如果抖音用的是自定义事件监听器click()可能不会触发。我在实测中iPhone上登录网页版时遇到过这个问题解决方式是换成btn.dispatchEvent(new MouseEvent(click, { bubbles: true }))。问题二点击完第一个已关注弹出了确认对话框此时后续的按钮点击会被弹窗挡住脚本就断掉了。这就涉及到弹窗处理见完整版。问题三循环执行完一瞬间浏览器向抖音服务器发送了几十甚至上百个取消关注请求。这种情况在极短时间内发出大量请求容易被风控系统盯上。需要加延时。3.2 加延时防限流版const timer setInterval(() { // 每次执行取一个按钮 const btn document.querySelector([class*follow]); if (!btn) { clearInterval(timer); return; } if (btn.textContent.includes(已关注)) { btn.click(); } }, 1500);这个版本用setInterval每1.5秒执行一次模拟人工操作节奏有效降低被风控的概率。跑起来之后你会看到页面上的按钮一个个自动变灰、变成关注这个视觉反馈说明脚本在正常工作。1.5秒的间隔是我自己反复试出来的比较稳定的值。太短比如300毫秒容易被限制太长比如5秒处理几千个关注列表等到地老天荒。1500毫秒是一个折中值如果你账号时间比较长、关注列表很大建议手动改成2000~3000。3.3 完整版带弹窗确认和自动停止的脚本实际使用时我推荐用这个版本(async function batchUnfollow() { // 配置 const MAX_COUNT 300; // 单轮最大取关数防止跑飞 const INTERVAL 2000; // 每次操作间隔单位毫秒 const SCROLL_STEP 1500; // 滚动加载增量单位像素 let count 0; return new Promise(resolve { const timer setInterval(() { // 1. 列表底部自动加载 window.scrollBy(0, SCROLL_STEP); // 2. 寻找已关注按钮 const btn findFollowButton(); if (!btn) { console.log(未找到更多按钮任务结束); clearInterval(timer); resolve(count); return; } // 3. 点击并处理弹窗 btn.dispatchEvent(new MouseEvent(click, { bubbles: true })); count; console.log(已取关 ${count} 个账号); // 4. 处理确认弹窗 setTimeout(() { const confirmBtn findConfirmButton(); if (confirmBtn) confirmBtn.click(); }, 300); // 5. 到达上限则停止 if (count MAX_COUNT) { clearInterval(timer); resolve(count); } }, INTERVAL); }); })(); // 辅助函数根据当前页面结构查找按钮 function findFollowButton() { const btnList document.querySelectorAll(button, [rolebutton], [class*follow]); return Array.from(btnList).find(btn btn.textContent.includes(已关注) || btn.textContent.includes(取消关注) ); } function findConfirmButton() { const btnList document.querySelectorAll(button, [class*confirm]); return Array.from(btnList).find(btn btn.textContent.includes(确认) || btn.textContent.includes(确定) ); }这个完整版做了几件最小版没做的事window.scrollBy自动滚动让懒加载的列表不断补充新的已关注按钮findFollowButton和findConfirmButton两个辅助函数把查找按钮的逻辑独立出来页面结构变了只需要改这几个函数MAX_COUNT上限保护防止脚本失控把整个关注列表全清了每次点击后延迟300毫秒处理弹窗再等2秒进行下一个模拟真人节奏4. 完整操作流程从登录到批量清理一步步走一遍这一章是纯实操流程照着做就行。4.1 登录并进入关注列表用Chrome打开抖音官网点击右上角头像扫码登录登录后进入我的主页点击顶部导航里的关注标签这时候你看到的是一页一页的关注账号卡片每张卡片右下角有一个已关注按钮4.2 打开控制台按F12笔记本可能是Fn F12打开开发者工具。顶部有几个TabElements、Console、Sources、Network等点击Console进入控制台面板。如果控制台区域太小可以按Ctrl Shift FWindows或Cmd Option FMac全屏打开。另外确保Console底部的输入框出现如果没出现点击控制台面板左上角的图标展开。4.3 先检查选择器是否命中不急着跑完整脚本先在Console里粘贴一小段探测代码确认能选中已关注按钮document.querySelectorAll([class*follow]).length如果返回一个大于0的数字比如120说明选择器命中如果返回0说明页面结构变了需要参考第5章重新定位按钮。再确认一下按钮文案Array.from(document.querySelectorAll([class*follow])).slice(0, 5).map(btn btn.textContent)你会看到类似[已关注, 已关注, 已关注, 已关注, 已关注]的数组这说明过滤条件没问题。4.4 滚动预加载如果关注列表很长比如几千个强烈建议先手动滚动十几秒把首屏之外的内容加载出来一部分。这一步不是必须的因为脚本里有自动滚动逻辑但预加载能减轻脚本后续滚动时网络加载的卡顿提高稳定性。4.5 运行完整脚本把第3.3节的完整版粘贴进Console按回车。脚本会在2秒后开始自动工作。这个时候你看到的现象是页面自动往下滚动已关注按钮一个接一个变成关注同时控制台不断输出日志。跑完一轮达到MAX_COUNT或页面底部没有更多按钮控制台会输出最终取关总数。建议跑完一轮后歇一会儿刷新页面确认列表状态再跑下一轮。4.6 收尾与验证关闭控制台刷新页面进入关注列表滚动检查是否还有遗漏的已关注按钮。如果发现清零了说明操作成功如果还有残留可能是滚动加载时DOM没有完全渲染重跑一轮即可。注意取关操作对抖音的推荐算法有影响。取关大量账号后首页推荐会在一段时间内变得更泛平台需要重新学习你的兴趣。这不是bug是正常现象过几天刷一刷就恢复正常了。5. 踩坑实录代码失效时的完整排查思路这部分是我最想写的。因为抖音网页端改版很频繁你按我上面的代码写好了过两周可能就失效了。这时候不要慌按下面的链路排查基本都能解决。5.1 症状点击无效或控制台报错常见报错有三类TypeError: Cannot read properties of null (reading click)——说明findFollowButton()返回值是 null没找到按钮。大概率是选择器[class*follow]匹配不到任何元素了页面结构改了。Element is not defined at HTMLButtonElement——按钮是找到了但事件的绑定方式变了盲点click()不起作用。这时候换成dispatchEvent(new MouseEvent(click, { bubbles: true }))试试。没有报错但按钮纹丝不动——按钮找到了事件也触发了但页面逻辑里已关注按钮的点击行为变了。比如以前点击直接取消关注现在点击会先弹出一个气泡菜单让你二次确认脚本没有处理这个新弹层。5.2 第一步在Elements面板里人工定位按钮F12切到Elements面板然后在页面上右键点击一个已关注按钮选检查。这时会跳到DOM树中对应的节点。认真看两个东西这个节点的完整class总字符串是什么示例css-xxx css-yyy follow-btn这个节点是button标签、div标签还是span标签然后回到Console用新的选择器替代旧的。比如你发现class变成了follow-action那么选择器就写document.querySelectorAll([class*follow-action])如果发现整个按钮是div模拟的没有button标签那就要额外注意事件绑定div的click()触发方式是一样的但要确认它有没有rolebutton之类的无障碍属性这些属性往往与事件监听相关联。5.3 第二步检查按钮的文字状态抖音的交互逻辑通常是按钮文案从已关注点击后变成关注中间可能会有1~2秒的loading状态。如果你的过滤条件是btn.textContent.includes(已关注)在loading状态下文字可能变成取消中或...此时过滤条件就不生效了。排查方式是在控制台手动执行document.querySelector([class*follow]).textContent看看实际输出的是什么。如果输出的是取消关注而不是已关注把过滤条件改成includes(取消关注)即可。5.4 第三步检查确认弹窗/DOM层上面5.1里提到的第三类情况我实际遇到过一次点击已关注后没有直接取关而是弹出一个底部气泡上面写着确定不再关注该用户和两个按钮取消确定。这时候脚本的流程要改成点击已关注 → 等待300ms → 找到气泡里的确定按钮 → 点击。定位确定按钮的选择器不一定是button标签可能是[class*confirm]或者[class*modal]下的子元素。用我之前完整版里的findConfirmButton函数改成function findConfirmButton() { const modal document.querySelector([class*modal], [class*popover]); if (!modal) return null; return Array.from(modal.querySelectorAll(button)).find(btn btn.textContent.includes(确定)); }具体要定位什么class还是用5.2里的检查大法在Elements里看。5.5 第四步检查滚动加载是否被触发如果脚本本身没有报错也没有输出日志但是页面一动不动多半是滚动部分失效了。排查方法手动在页面里滚动看关注列表会不会加载更多。如果手动滚动都不加载那问题不在脚本而是页面逻辑本身没触发。此时检查你是不是在关注标签页内。抖音网页版的导航会有多个Tab比如视频直播图文关注你的注意力需要在关注这个列表内滚动才有效。5.6 排查顺序总结我建议按这个顺序来排查而不是一上来就怀疑代码写错了确认页面登录状态是否过期确认当前停留在关注Tab在Console里运行document.querySelectorAll(button).length确认按钮总数在Console里打印所有按钮的textContent前20个确认文案内容手动点击一个按钮观察交互行为是否出现弹窗、文案变化节奏根据观察结果改选择器和流程先手动跑一轮只操作一两个按钮确认无误后再批量跑6. 还能怎么扩展这套思路不止能用来取关写完之后我琢磨了一下这个控制台DOM遍历定时执行的思路可以复用到很多类似场景。这里给几个我知道的实际案例供参考6.1 批量取消收藏逻辑几乎一样就是进入我的收藏页面把选择器从已关注改成已收藏或者取消收藏相关的class过滤条件改一下流程完全复用。6.2 批量清理微博关注微博网页版的关注列表结构更规整按钮文案通常是已关注三个字定位起来甚至比抖音还简单。把脚本里的选择器换成.btn_link或者[action-typebtn_follow]就能用。6.3 批量删除内容/评论思路略有不同。删除类操作一般不是循环点击某一个按钮而是点击目标对象 → 等待内容出现 → 点击删除按钮 → 确认弹窗 → 下一个。核心多了一个等待内容出现的步骤可以理解为延时时间要加长。一般来说删除内容比取关更敏感间隔建议拉到3~5秒单次数量控制在50以内。6.4 批量添加关注反向操作。把已关注改成关注按钮注意防止误关注到广告号所以最好在过滤条件里加上一个黑名单关键词列表。const BLACKLIST [xx代购, xx课程]; const candidates Array.from(btnList).filter(btn btn.textContent.includes(关注) !btn.textContent.includes(已关注) !BLACKLIST.some(kw btn.parentElement.textContent.includes(kw)) );7. 一些掏心窝的总结最后说几点实际经验。关于脚本本身的稳定性我觉得比任何技术细节都重要的是先小批量测试。我见过太多人拿到代码就往主号上一跑结果一个没注意把一些还有价值的账号也取关光了。正确的操作是先改MAX_COUNT为10跑完一轮检查取关的对不对然后再放开数量。关于频率控制我再强调一次。连续快速取关几百个账号很容易触发平台的风控机制。我实测连续取关150个左右后接口会出现频繁操作的提示严重时账号可能被临时限制部分功能。如果遇到这个提示立即停止脚本过几个小时再继续。关于抖音这个平台本身它的前端变化非常活跃。今天能用的选择器两周后可能就失效了。这不是代码的问题而是平台在动态调整前端逻辑。所以不要把代码能用当作理所当然要有随时排查、修改的意识。如果你照着这篇文章跑通了那我恭喜你上千的关注列表终于能清清爽爽了。如果你运行过程中发现按钮样式跟文章里对不上不用怀疑自己那是页面又改版了——拿第5章的排查链路走一遍改一下选择器就行。当然我更希望你是那个理解了每行代码在做什么的人而不是只会复制粘贴的脚本搬运工。毕竟真正有价值的是思路而不是那5行代码本身。
