如何用JavaScript为最后4个a元素添加target类并排除首个元素

报错根因 #

1. ID重复违规：你给5个a标签都设置了相同的id="aitems"，HTML规范要求id全局唯一，document.querySelector('#aitems')只会返回第一个匹配的DOM元素，不是元素集合，所以你调用list[0]会拿到undefined，后续操作自然报错。
2. 语法混淆：原生JavaScript没有addClass()/removeClass()方法，这是jQuery的专属语法，原生操作元素类名要使用classList属性下的add()/remove()方法。

推荐解决方案（PHP渲染层面处理，性能最优无兼容问题） #

直接在.phtml模板渲染菜单时加序号判断，第一个链接不输出新标签打开的属性，剩余4个输出，无需额外JS介入：

<?php foreach ($menuList as $index => $item): ?>
<a 
    class="aitems"
    href="<?= $block->getItemUrl($item) ?>"
    <?php if ($index !== 0): ?>
    target="_blank"
    rel="noopener noreferrer"
    <?php endif; ?>
>
    <?= $item['name'] ?>
</a>
<?php endforeach; ?>

备选JS实现方案 #

如果你一定要通过JS实现需求，首先先把所有a标签的id="aitems"改成class="aitems"（多元素标识只能用class），再用如下代码，需等待DOM加载完成后执行避免找不到元素：

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有菜单链接
    const menuItems = document.querySelectorAll('.aitems');
    menuItems.forEach((item, index) => {
        if (index === 0) {
            // 首个链接移除target属性/类
            item.removeAttribute('target');
            item.removeAttribute('rel');
            // 如果你之前是加的类控制打开方式，就用下面这句
            // item.classList.remove('target');
        } else {
            // 后4个链接加新标签打开属性
            item.setAttribute('target', '_blank');
            item.setAttribute('rel', 'noopener noreferrer');
            // 加类的话用下面这句
            // item.classList.add('target');
        }
    });
});

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