为何使用JavaScript时进度条仅添加到最后一个type=timeline的div？

兄弟，先给你点出两个关键问题：首先HTML规范里id必须是唯一的，你多个div用同一个id本身就不合规，这大概率是你只拿到第一个元素的根源；其次，如果你之前是用document.getElementById()来获取元素，这个方法本来就只会返回匹配到的第一个元素，自然只能给一个div加上进度条。

下面给你一步步解决：

1. 先修正HTML的id问题（可选但强烈推荐） #

虽然你靠type属性也能筛选元素，但重复id会给后续维护埋下坑，建议把重复的id改成class，比如改成class="content-block"，type属性保留，这样结构更规范。

2. 正确获取所有type="timeline"的div #

别再用getElementById了，改用document.querySelectorAll('div[type="timeline"]')，这个方法会返回所有符合条件的元素组成的节点列表。

3. 遍历所有匹配元素，逐个添加进度条逻辑 #

你需要循环处理每个找到的div，给每个都单独创建进度条并绑定滚动事件。给你写个完整示例：

// 获取所有type为timeline的div
const timelineDivs = document.querySelectorAll('div[type="timeline"]');

// 遍历每个div，逐一配置进度条
timelineDivs.forEach(div => {
  // 创建进度条元素
  const progressBar = document.createElement('div');
  // 给进度条加样式（你可以根据自己需求调整）
  progressBar.style.cssText = `
    position: sticky;
    top: 0;
    height: 3px;
    background-color: #2196F3;
    width: 0%;
    z-index: 999;
    transition: width 0.2s ease;
  `;
  
  // 把进度条插入到当前div的最顶部
  div.insertBefore(progressBar, div.firstChild);
  
  // 绑定滚动事件，实时更新进度
  div.addEventListener('scroll', () => {
    // 计算滚动进度百分比
    const scrollPercent = (div.scrollTop / (div.scrollHeight - div.clientHeight)) * 100;
    progressBar.style.width = `${scrollPercent}%`;
  });
});

为啥之前只生效一个？ #

• 如果你用了document.getElementById()，它天生只会返回第一个匹配id的元素，所以只处理了第一个div；
• 就算你用了其他选择器，但没做遍历，直接操作了第一个匹配元素，也会出现这个情况。

另外提醒下：如果这些div是动态加载的（比如通过AJAX加载、或者Vue/React这类框架动态渲染的），你得等元素完全加载后再执行这段代码，或者用事件委托的方式处理动态元素。

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