如何通过循环从HTMLCollection转成的数组中获取元素值？遇undefined问题

嘿，我来帮你定位代码里的问题，看看为什么会拿到undefined：

1. 第一个错误：多余的[i]索引 #

你在循环里已经把当前的.test div赋值给了again，但后面又写了again[i]——这完全是画蛇添足！again本身就是单个的div元素，不是数组，用again[i]去访问只会得到undefined，后续的getElementsByClassName自然也没法在正确的元素上执行。

2. 第二个错误：直接对集合用.value #

getElementsByClassName("product_size")返回的是HTMLCollection（元素集合），哪怕页面里只有一个匹配的元素，它也会返回一个包含该元素的集合，而集合本身没有value属性，所以直接访问.value肯定会得到undefined。你需要从集合中取出具体的元素，再访问它的value。

修正后的代码（保留你的原逻辑） #

var divCol = document.getElementsByClassName("test");
var arr = Array.prototype.slice.call(divCol);
for (var i = 0, len = arr.length; i < len; i++) {
    var currentDiv = arr[i];
    // 先获取集合，再取第一个元素（如果确保每个test div里只有一个product_size的话）
    var productSizeEl = currentDiv.getElementsByClassName("product_size")[0];
    // 先判断元素是否存在，避免报错
    if (productSizeEl) {
        var pSize = productSizeEl.value;
        alert(pSize);
        // 你的其他逻辑...
    }
}

更简洁的写法（推荐） #

用querySelector可以直接获取单个元素，不用处理集合，代码更清晰：

// 直接获取所有.test div，querySelectorAll返回的NodeList可以直接forEach遍历
document.querySelectorAll(".test").forEach(function(currentDiv) {
    var productSizeEl = currentDiv.querySelector(".product_size");
    if (productSizeEl) {
        var pSize = productSizeEl.value;
        alert(pSize);
        // 你的其他逻辑...
    }
});

额外提醒 #

• 记得加元素存在性判断（if (productSizeEl)），避免某个.test div里没有.product_size元素时抛出错误。
• 如果.product_size是input、select这类表单元素，value属性才有效；如果是普通元素（比如p、span），你需要用textContent或innerText来获取内容哦。

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