如何在现代浏览器中模拟IE7文档模式下getElementById的行为？

可以通过覆盖原生的document.getElementById()方法，实现IE7模式下的两个核心特性：

• 对ID和NAME属性进行不区分大小写的匹配
• 优先匹配ID，若不存在则匹配NAME属性（IE7的行为）

反向Polyfill代码实现 #

// 保存原生方法
const nativeGetElementById = document.getElementById;

// 重写getElementById
document.getElementById = function(id) {
  // 先尝试原生区分大小写的ID匹配
  const nativeResult = nativeGetElementById.call(this, id);
  if (nativeResult) {
    return nativeResult;
  }

  // 转换为小写，用于不区分大小写匹配
  const lowerId = id.toLowerCase();

  // 遍历所有带ID或NAME属性的元素，查找匹配项
  const candidates = document.querySelectorAll(`[id], [name]`);
  for (const el of candidates) {
    const elId = el.id.toLowerCase();
    const elName = el.name.toLowerCase();
    if (elId === lowerId || elName === lowerId) {
      return el;
    }
  }

  // 无匹配则返回null
  return null;
};

注意事项 #

• 若页面元素数量极大，遍历所有带ID/NAME的元素可能有性能损耗，可根据实际场景缩小查询范围（比如限制在特定容器内）
• 当存在多个元素的ID/NAME不区分大小写匹配目标值时，会返回第一个匹配到的元素，与IE7行为一致
• 建议将这段代码放在页面所有业务脚本之前加载，确保所有依赖getElementById()的逻辑都能使用重写后的方法

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