破解动态网页：如何用JavaScript获取自动消失的联想词

前几天在做数据分析时，我尝试获取某网站上输入搜索词后的联想词，输入搜索词后会弹出一个显示联想词的框。有趣的是，当我尝试通过按F12定位这个弹框在HTML中的位置时，输入框失去焦点后，联想词弹框就自动消失了。我观察到 HTML 代码中div元素也从代码中消失了。这种情况下，我该如何才能准确地定位这个元素弹框并获取其中的联想词呢？

解决方案

方法一：查找DOM节点

这算是最简单的操作，通过调试框可以看到网页dom结构的变化，当触发联想词弹框时，记下弹框对应标签的类名或者id，然后查找得到这个标签的html代码，从中解析出联想词。

const elementByClassName = document.querySelector(".luoxiaodou");
if (elementByClassName) {
    const htmlContent = elementByClassName.innerHTML;
    console.log(htmlContent);
}

输入框获取焦点时，联想词弹框出现，输入框失去焦点时，联想词弹框消失。咱们先给输入框添加焦点，弹框出现时，运行上面的代码获取节点对应的html内容。

这个想法很好，但是这里有一个问题：就是元素的加载需要时间，需要请求服务端获取数据，然后再加载出来。，如果是输入框获取焦点后立即去查找元素，大概率获取的结果是空，所以这中间要有延迟的时间，咱们就说这坑大家有没有踩过吧。

方法二：使用MutationObserver来监视DOM变化

我还有两个想法，第一个是：咱们能不能拦截一下网络，然后从服务器的响应里头捞点联想词出来？我个人觉得这招儿挺靠谱的，但目前还没来得及试试。等我尝试之后写一下关于监听网络请求获取联想词的内容，咱们就先记个账，到时候一定补上。

另一种方式就是使用MutationObserver来监视DOM变化，可以在控制台中编写一个JavaScript函数，当包含特定类的元素出现在DOM中时，打印出该元素的HTML内容。为此，你可以使用MutationObserver来监视DOM变化。

而我选择了另一种可能的解决方案，就是利用MutationObserver这个JavaScript API。一旦检测到DOM中有特定类的元素出现，就立即打印出它的HTML内容。MutationObserver 是 JavaScript 自带的 API，它用于监视DOM树的变化。这是浏览器原生支持的功能，包括我们常用的Chrome在内。正好在插件开发中使用。

咱们可以创建一个函数，传参是标签选择器和一个回调函数，当获取到变化的网页时，调用回调函数解析获取联想词。这里使用一个map集合，可以保证管理多个监视器，以下是实现代码：

const observers = new Map()

/**
 * 启动监视指定选择器的元素变化。
 * @param {string} selector - CSS选择器，可以是类名（以`.`开头）或ID（以`#`开头）。
 * @param {function} callback - 回调函数，当符合选择器的元素添加到DOM时调用。
 */
function startObserving(selector, callback) {
   
  /**
   * 观察者回调函数，监视DOM树的变化。
   * @param {MutationRecord[]} mutationsList - DOM变化记录的列表。
   * @param {MutationObserver} observer - 观察者实例。
   */
  const observerCallback = function (mutationsList, observer) {
   
    for (const mutation of mutationsList) {
   
      if (mutation.type === 'childList') {
   
        mutation.addedNodes.forEach(