如何修改JS代码获取最后一个img元素的name属性并解决getAttribute报错

问题根源 #

报错是因为DOM返回的类数组结构索引从0开始计数，你拿到的img总长度为totalimages时，最大的有效下标是totalimages - 1，直接用totalimages作为下标取值会越界，得到undefined，调用getAttribute方法自然就报错了。另外你的代码同时调用了两次DOM查询接口，存在冗余，也没有做属性存在的容错判断，极端场景下还会触发其他报错。

需要修改的部分 #

• 索引修正：取下标时用总长度 - 1定位最后一个img元素
• 冗余查询优化：统一用一次querySelectorAll拿到所有img元素，不需要同时调用getElementsByTagName
• 补充容错逻辑：提前判断元素、属性是否存在，以及属性值是否符合格式要求，避免异常场景报错

修改后可运行的代码 #

function refresh_images() {
    const allImgs = document.querySelectorAll('img');
    // 页面无img元素直接返回
    if (allImgs.length === 0) return;
    // 定位最后一个img元素
    const lastImg = allImgs[allImgs.length - 1];
    const nameAttr = lastImg.getAttribute('name');
    // 判断name属性存在且符合格式要求再做替换
    if (nameAttr && nameAttr.startsWith('grafico-betfair-')) {
        const targetValue = nameAttr.replace('grafico-betfair-', '');
        // 此处可添加拿到目标值后的后续业务逻辑
        return targetValue;
    }
    // 不符合要求的场景可按需返回默认值
    return '';
}

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