使用div class页面无法渲染，报错'ser is not defined'的问题咨询

核心原因 #

你在JS里直接写ser.appendChild(ol)，本质是在调用一个名为ser的变量，但这个变量你根本没定义。而用id="ser"时能生效，是浏览器的历史遗留隐式行为——它会自动把id值作为全局变量挂载到window对象上，但这不是规范要求的，完全不能依赖。

你踩的概念误区 #

• 类名和JS变量没有自动关联：
  CSS里用.ser是选中类名为ser的元素，但JS不会自动帮你把类对应的元素变成可直接调用的变量。要操作类元素，必须主动通过DOM API获取：

  • 用document.querySelector('.ser')：返回第一个匹配类名的元素
  • 用document.getElementsByClassName('ser')：返回所有匹配类名的元素集合（类数组，取单个元素要加[0]）

• id的全局变量是“不规范捷径”：
  浏览器自动把id转成全局变量只是历史遗留的方便性设计，现代开发绝对不推荐这么用——一是容易和自定义变量重名导致bug，二是代码可读性差，别人看你直接写ser根本不知道这是个DOM元素。

修正后的代码 #

JS代码

let x = [];
const json1 = '{"https://www.w3schools.com":"w3schools"}';
const obj1 = JSON.parse(json1);
const ol = document.createElement('ol');
// 主动获取类名为ser的元素
const serElement = document.querySelector('.ser');
serElement.appendChild(ol);

for (var key in obj1){
  x = document.createElement('li');
  x.innerHTML = `<a href="${key}">${obj1[key]}</a>`; // 改用模板字符串更安全
  ol.appendChild(x);
}

CSS代码（无需修改）

.ser{
    color: red;
}

HTML代码（无需修改）

<div class="ser">welcome</div>

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