基于className爬取Google Maps距离的方案咨询

1. 你当前的定位写法不正确 #

• 核心问题有两个：
  • document.getElementsByClassName() 虽然支持传入空格分隔的多个类名做匹配，但你硬编码的UgZKXd、yYG3jf属于构建生成的哈希类名，本身就没有稳定性
  • 链式调用的.item()方法要求传入数值类型的集合索引，你传入空字符串会被JS隐式转换为索引0，仅当目标元素恰好是匹配结果的第一个节点时才能取到值，只要页面DOM顺序变动就会拿到错误元素，甚至返回null。
• 你当前的问题代码：

document.getElementsByClassName("UgZKXd clearfix yYG3jf selected").item("")

2. Google Maps的className必然会随时间变动 #

• 你在页面上看到的无意义短字符串类名（比如UgZKXd、yYG3jf），都是前端工程化构建阶段自动生成的哈希类名，Google不会对这类类名的稳定性做任何承诺。页面发版、功能迭代、AB实验灰度、样式调整都可能导致类名变更，短则数天长则数月这类写法就会完全失效。
• 除了类名，页面的DOM层级、标签结构也可能随版本调整，所有硬编码类名、DOM路径的爬取逻辑维护成本都极高。

3. 类名动态场景下的可行实现方案 #

按稳定性从高到低排序：

• 优先使用官方能力获取数据：两点间距离查询是Google Maps开放的标准服务能力，返回结构化的距离、时长数据，不存在前端改版失效的问题，是合规性和稳定性最高的方案。
• 拦截页面接口取结构化数据：如果必须从网页端拿数据，可以通过浏览器调试工具找到页面加载路线结果时的接口，直接拦截接口返回的JSON响应，从结构化数据里提取距离字段，完全不需要解析DOM，不受类名、DOM结构变动影响。
• 基于稳定DOM特征做定位（不依赖哈希类名）：如果只能通过DOM解析拿数据，不要用构建生成的哈希类名做定位依据，改用更稳定的属性匹配：
  • 优先匹配无障碍属性，比如role、aria-label，这类属性是为读屏等辅助功能设置的，变更频率远低于哈希类名
  • 结合文本特征匹配，距离结果必然包含km/米/公里这类距离单位，路线时长会包含小时/分钟/min类单位，可以用文本包含规则筛选元素
  • 参考实现代码：

  // 从路线选择区域筛选带距离单位文本的目标元素
  const routeContainer = document.querySelector('div[data-travel-mode]');
  const distanceNode = Array.from(routeContainer.querySelectorAll('div')).find(node => {
    return /\d+(\.\d+)?\s*(km|公里|米|m)/.test(node.textContent.trim())
  });
  

提示：爬取网页数据需要遵守对应站点的服务条款，建议优先评估官方服务的使用规则，避免合规风险。

内容的提问来源于stack exchange，提问作者Fadi Ft Ftena