如何获取channelList数组各元素URL的独立HTTP状态并解决类选择器不生效问题

问题1：无法获取数组所有元素的独立状态 #

原因是原代码仅通过channelList.find()匹配了单个频道发起请求，只处理了第一个匹配的元素。你需要遍历整个channelList数组，给每个元素单独发起fetch请求。

问题2：修改为类名选择后不生效的核心原因 #

1. 语法错误：JS选择器大小写敏感，正确写法是getElementsByClassName，你写的getElementbyClassName里by的首字母小写，会直接触发语法报错
2. ID重复冲突：原模板里所有频道的状态节点都用了同一个id="hlstatus"，HTML规范要求ID必须全局唯一，重复ID会导致选择器匹配异常
3. 执行顺序错误：原代码先发起异步fetch请求，后执行DOM渲染逻辑，请求返回时DOM还没生成，自然找不到对应节点更新内容

修正后完整代码 #

HTML代码

<div id="locales"></div>

JS代码

const channelList = [
{
    name: "La 1",
    title: "RTVE La 1",
    link: "go:la1",
    imgClass: "la1",
    flag: "es",
    url: "./la1.html",
},
{
    name: "La 2",
    title: "RTVE La 2",
    link: "go:la2",
    imgClass: "la2",
    flag: "es",
    url: "./la2.html",
},
];

const container = document.getElementById("locales");
const img = "https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e";

// 第一步：先渲染所有频道卡片
channelList.forEach(result => {
  const content = `
<div class="col-6 col-sm-4 col-lg-3 col-xl-2">
    <div class="dropdown card darkolorbg text-white card-canal card-link text-white">
        <a class="card-link text-white" href="${result.link}" ${result.dDown || ''}>
        <div class="card-body">
        <div class="d-flex justify-content-center">
            <img class="canal-img ${result.imgClass}" src="${img}" alt="">
        </div>
            <div class="d-flex justify-content-center"><h5>${result.name} <span class="hidden">${result.title}</span> <br><span class="subtf1"><i class="flag ${result.flag}"></i></span> <span class="hlstatus" data-channel="${result.name}"></span> </div>
        </div>
        </a>
        </div>
</div>
    `;
  container.innerHTML += content;
});

// 第二步：遍历所有频道，单独拉取每个的状态
channelList.forEach(canal => {
  fetch(canal.url).then(function(response) {
    // 匹配对应频道的状态节点
    const statusNode = document.querySelector(`.hlstatus[data-channel="${canal.name}"]`);
    if(response.status !== 200){
        statusNode.innerText = "Offline";
    } else {
        statusNode.innerText = "Online";
    }
  }).catch(() => {
    // 请求异常也标记为离线
    const statusNode = document.querySelector(`.hlstatus[data-channel="${canal.name}"]`);
    statusNode.innerText = "Offline";
  })
});

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