getElementsByClassName取key类id，为何有元素却返回undefined

• 最贴合你描述现象的核心原因：JS类名匹配规则与CSS不一致，导致能匹配样式但匹配不到JS节点
  原生方法document.getElementsByClassName在查找元素时，类名是严格区分大小写的；但CSS选择器匹配类名时默认对大小写不敏感。
  如果元素实际书写的类名和你JS里查找的类名存在大小写差异（比如元素上写的是Key，你JS里传的是全小写的key），就会出现：CSS规则能正常匹配到元素、样式生效，但JS查找时因为大小写不匹配返回空类数组，取[0]得到undefined，再访问.id自然也返回undefined。
  你测试时item1的类名书写大小写完全一致，所以能正常拿到节点。
  快速验证方式：在控制台直接输入document.getElementsByClassName('key')，看返回的集合长度是不是0；再输入document.querySelectorAll('[class*=key i]')（加i代表大小写不敏感匹配），如果能查到对应元素，就可以确认是类名大小写不匹配的问题。

• 第二类高频原因：取值时机和DOM渲染错位
  你现在的代码是函数定义完成后直接同步执行的，不是按钮点击触发时才运行的。如果带key类名的元素是后续通过JS动态插入DOM的、或是异步请求返回后才给元素绑定的key类名，就会出现：你执行取值逻辑的瞬间，元素还没带上类名、甚至还没插入DOM，此时查找自然拿不到节点；但等页面加载完成后元素渲染到位，CSS样式正常生效，你看到样式匹配成功就误以为元素从一开始就存在。
  快速验证方式：在runOnButton函数第一行打印document.getElementsByClassName('key').length，看你实际执行代码时这个值是不是0。

• 容易忽略的笔误问题：检查getElementsByClassName传入的类名是不是漏了引号
  如果代码里误写为document.getElementsByClassName(key)[0].id（类名没加引号），JS会把key当作全局变量解析，如果全局作用域下刚好存在值为undefined的key变量，就会向方法传入undefined参数，最终匹配类名为"undefined"的空结果集，导致取值返回undefined。

修复参考代码 #

function runOnButton() {
  // 先获取节点，做存在性判断，避免空值报错
  const keyEle = document.getElementsByClassName('key')[0];
  const item1Ele = document.getElementsByClassName('item1')[0];

  if (!keyEle || !item1Ele) {
    console.warn('未找到对应类名的元素', {keyEle, item1Ele});
    return false;
  }

  const currentId = item1Ele.id;
  const whereKey = keyEle.id;
  console.log(whereKey);
  return currentId == whereKey;
}

// 绑定按钮点击事件触发逻辑，不要在脚本加载时直接同步执行
document.querySelector('你的按钮选择器').addEventListener('click', runOnButton);

注意：全数字开头的id值通过element.id属性读取是完全合法的，不存在兼容性问题，你场景里item1能正常取到数字id，就说明这部分逻辑没有问题。

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