如何用JavaScript获取元素属性值？代码返回undefined求解决

嘿，我来帮你搞定这个问题！你的原生JS代码返回undefined，主要是因为用错了DOM方法，咱们一步步拆解：

问题根源 #

你用的getElementsByClassName()方法只能接受单个类名作为参数，不能像jQuery那样传入完整的CSS选择器（比如.alllabel li.active这种包含标签和复合类的选择器）。当你把.alllabel li.active传给它时，浏览器会去找类名就是.alllabel li.active的元素（显然不存在），所以返回的是空集合，调用getAttribute("id")自然就得到undefined了。

正确的替代写法 #

原生JS里和jQuery的$()最接近的方法是querySelector()，它支持完整的CSS选择器语法，完美匹配你原来的jQuery逻辑：

// 如果是在iframe中操作父文档，保留parent.document
var selectedLabel = parent.document.querySelector(".alllabel li.active").getAttribute("id");

// 更简洁的写法：直接访问元素的id属性，效果和getAttribute一致
var selectedLabel = parent.document.querySelector(".alllabel li.active").id;

额外的健壮性建议 #

为了避免找不到元素时抛出错误（比如没有激活的li），可以先判断元素是否存在：

var activeLi = parent.document.querySelector(".alllabel li.active");
var selectedLabel = activeLi ? activeLi.id : null; // 元素不存在时返回null，避免报错

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