我用两行代码清空了掘金沸点

hauk0101
173 阅读3分钟

背景

手痒的一天，看了眼自己之前发的掘金沸点，感觉有一种上学时发的中二的QQ空间日志。

然后想着删掉一些吧，不然岂不是暴露了我喜欢瞎折腾的本性。

然后我打开“创作者中心”-“内容管理”-“沸点管理”，耐心的一条一条删除……

两分钟过去了，看着还剩 14 页的沸点……

人麻了。

图1.png

分析

作为一个程序员，我感觉不能这么干下去了……

于是，我干了这么几件事：

  • F12 检查下页面，发现了“删除”的 HTML 元素

图2.gif

  • 点击“删除”按钮，看到了确认弹窗，顺带找了下“确定”按钮是哪个 HTML 元素

图3.png

  • 分析完毕，心里有谱了。

动手

接下来的事情就很简单，我只需要先这样，然后那样，最后再这样，应该就成了。

哈哈，废话不多说，我们先在浏览器里这样：

// 在控制台运行下看看呢
document.getElementsByClassName('byte-dropdown-item')[0].click();

图4.gif

然后，我们再继续这样：

// 弹窗出来后，再执行下面的代码
document.getElementsByClassName('btn-confirm')[0].click();

图5.gif

最后，沸点就消失了。

优化

两行代码，让我省掉了半分钟点击的时间，但还是挺累。

作为程序员，必须优化呀。

于是，我写了个方法：

function deleteShortMsg() {
  const msgDeleteElements = document.getElementsByClassName('byte-dropdown-item');
  if (msgDeleteElements.length > 0) {
    msgDeleteElements[0].click()
    setTimeout(() => {
      const confirmBtnElements = document.getElementsByClassName('btn-confirm')
      if (confirmBtnElements.length > 0) {
        confirmBtnElements[0].click()
      }
    }, 1000)
  }
}
// 调用
setInterval(deleteShortMsg, 2000)

当我敲下回车，边喝水边看着沸点就在我眼前，一个一个的消失了。

图6.gif

后来

又过了几局连连看的功夫，我的沸点就跟我的口袋一样干净了……

图7.png

忠告

最后我只想说：不要尝试！不要尝试！不要尝试！

小结

当然，这不是我第一次干类似的事了。

之前的某一天，我偶然打开自己的 QQ 空间，翻着那些不忍直视的文字，就萌生了类似的想法。

所以这算是我把经验挪了过来，原理都差不多。

我在这里还是简单分享下我的思考过程以及想法：

  • 当我们有类似需求的时候，可以先总结出来这些重复性步骤中的核心部分，比如是不是要点开某个元素，然后会出来某个确认弹窗，再点击某个元素，就会达到我们的目的。总结下来就是，尽可能的抽象出来我们要模拟的流程，而且越精准越好
  • 之后再去定位这些关键步骤的元素，因为是 HTML 页面，所以可以考虑用到类似“getElementsByClassName” 的方法。需要注意的是，要注意分析触发元素进入下一个步骤的操作，有些是点击，有些则是鼠标移动，比如掘金的沸点，就用到了“mouseenter” 事件，因此要有耐心的去分析。
  • 最后，这个不仅仅可以用于帮我们干一些简单的重复性操作，其实再做一些基础的爬虫模拟方面，也是很有帮助的。因为有很多简单的爬虫，就可以用无头浏览器，通过代码的模拟人为操作的方式，把数据抓取出来，最后生成文件供我们使用。

至此，一个生活小妙招分享给大家，希望你们都用不到。哈哈。

avatar
文章
阅读
粉丝