如何通过HTML DOM独立修改连续弹出的多个gfi-windows内容

问题场景 #

• 需求目标：通过原生JavaScript DOM操作，给每个弹出的getFeatureInfo（gfi）窗口内的Canaltype、Material字段匹配插入对应的描述值，交叉口位置会连续弹出2个gfi窗口。
• 异常表现：修改当前gfi窗口的值后，修改结果会全局固定，被错误传递到后续弹出的新gfi窗口，出现值错配。
• 参考截图：
  
  
  

现有代码问题 #

当前代码存在三个核心缺陷，直接导致值串流问题：

• 查找范围错误：通过document.getElementsByClassName全局查找表格，永远会取到页面上第一个匹配的table元素，新弹窗弹出后，代码操作的还是之前已经被修改过的旧弹窗表格，没有限定在当前新弹窗范围内查找元素。
• 触发逻辑缺失：代码仅执行一次，没有监听新弹窗的渲染动作，新gfi窗口弹出后无法自动触发修改逻辑。
• 原始值丢失：直接修改单元格的innerText后，字段原本的编码值（如5、29）被描述文本覆盖，后续匹配逻辑无法识别原始编码。

最优实现代码 #

核心逻辑是通过浏览器原生MutationObserver监听DOM变化，自动捕获新弹出的gfi弹窗，仅对未处理过的新弹窗内表格做字段替换，同时给已处理表格打标记避免重复操作。

// 字段编码与描述值映射配置，后续新增字段、补充编码直接修改此处即可
const FIELD_VALUE_MAP = {
  Canaltype: {
    '5': 'Free-flow line'
  },
  Material: {
    '29': 'Vitrified clay'
  }
};

// 初始化DOM监听器
const gfiObserver = new MutationObserver((mutationList) => {
  mutationList.forEach(mutation => {
    mutation.addedNodes.forEach(domNode => {
      // 跳过非元素类型的节点
      if (domNode.nodeType !== Node.ELEMENT_NODE) return;

      // 仅查找当前新增节点内、未被处理过的目标表格
      const targetTables = domNode.querySelectorAll('.table.table-hover:not([data-gfi-processed="true"])');
      
      targetTables.forEach(table => {
        // 打标记，避免后续重复处理同一个表格
        table.setAttribute('data-gfi-processed', 'true');
        const tableTbody = table.firstElementChild;
        if (!tableTbody) return;

        // 遍历表格行匹配目标字段
        Array.from(tableTbody.children).forEach(row => {
          const labelCell = row.querySelector('.bold.firstCol');
          if (!labelCell) return;
          const fieldName = labelCell.innerText.trim();
          
          // 跳过非目标字段
          if (!Object.hasOwn(FIELD_VALUE_MAP, fieldName)) return;

          const valueCell = row.getElementsByTagName('td')[1];
          if (!valueCell) return;
          const originCode = valueCell.innerText.trim();

          // 匹配到对应描述值则替换
          if (FIELD_VALUE_MAP[fieldName][originCode]) {
            valueCell.innerText = FIELD_VALUE_MAP[fieldName][originCode];
          }
        });
      });
    });
  });
});

// 启动监听，覆盖整个页面的DOM新增动作
gfiObserver.observe(document.body, {
  childList: true,
  subtree: true
});

方案优势 #

• 兼容性强：纯原生JS实现，无任何框架依赖，适配OpenLayers、Leaflet、ArcGIS API for JavaScript等所有WebGIS框架的gfi弹窗场景。
• 不会串值：所有查找操作都限定在新弹出的DOM节点范围内，且通过自定义属性标记已处理元素，完全避免修改结果跨弹窗传递的问题。
• 维护成本低：字段映射逻辑独立抽离为配置项，后续新增字段、补充编码对应关系不需要修改核心逻辑。
• 性能优异：基于浏览器原生的DOM变化监听API实现，相比定时器轮询方案性能开销极低，不会造成页面卡顿。

优化提示：如果你使用的框架中gfi弹窗有固定的专属容器类名（比如.ol-popup、.leaflet-popup等），可以将查找目标表格的范围进一步缩小到弹窗容器内，进一步提升运行效率。

内容的提问来源于stack exchange，提问作者ravindraji4