如何使用getElementsByClassName与appendChild仅修改最后一个类元素

嘿，我一眼就看出问题所在啦——这是个超常见的索引偏移小坑！

你用document.getElementsByClassName("alert").length拿到的是集合里元素的总数，但HTML集合是类数组结构，索引从0开始计数的。举个例子：如果有3个.alert元素，它们的索引是0、1、2，而length是3，你用[3]去访问的话，完全超出了集合的范围，自然会返回undefined。

修正后的代码应该是这样的： #

// 先把集合存起来，避免重复查询DOM，提升性能
const alertCollection = document.getElementsByClassName("alert");
// 最后一个元素的索引是「集合长度 - 1」
const lastAlertElement = alertCollection[alertCollection.length - 1];

// 保险起见，先判断元素是否存在再操作，避免空值报错
if (lastAlertElement) {
  lastAlertElement.appendChild(closebutton);
}

额外小技巧： #

如果不想手动计算索引，还可以用querySelector直接定位最后一个元素，代码更简洁直观：

const lastAlertElement = document.querySelector(".alert:last-of-type");
if (lastAlertElement) {
  lastAlertElement.appendChild(closebutton);
}

这里querySelector会直接返回匹配到的最后一个.alert元素，不用再费心处理索引啦～

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