如何用JavaScript的querySelectorAll获取同ID的第二个div并执行对应逻辑？

看起来你碰到的核心问题大概率是ID重复导致的，另外可能也存在DOM加载时机不对的情况，我给你梳理下解决方案：

第一步：修正HTML的ID重复问题 #

HTML里的id属性是全局唯一的，不能给多个元素用同一个id（比如你两个div都用了id='slide'），浏览器只会返回第一个匹配id的元素，这就是你只能检测到第一个div的主要原因。先把id改成唯一的：

<!-- 第一个timeline类型的div -->
<div type='timeline' id='slide-timeline'>
  <section>
    <header>Title One</header>
    <article>Content</article>
  </section>
</div>

<!-- 第二个slideshow类型的div -->
<div type='slideshow' id='slide-slideshow'>
  <section>
    <header>Title Two</header>
    <article>Slideshow Content</article>
  </section>
</div>

第二步：正确定位slideshow类型的div #

你可以用属性选择器精准匹配type="slideshow"的元素，同时确保代码在DOM完全加载后执行（避免元素还没渲染就去查找）：

// 等待DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 用属性选择器找到type为slideshow的div
  const slideshowElement = document.querySelector('[type="slideshow"]');
  
  if (slideshowElement) {
    // 这里写你需要执行的特定代码
    console.log("成功找到slideshow类型的div！");
    // 示例：比如给这个div添加样式，或者初始化轮播逻辑
    initSlideshow(slideshowElement);
  } else {
    console.log("未找到slideshow类型的div，请检查HTML结构");
  }
});

// 示例：你的slideshow专属逻辑函数
function initSlideshow(el) {
  // 这里写轮播的初始化代码，比如绑定事件、加载图片等
  el.style.backgroundColor = '#f0f8ff';
}

其他可选的定位方式 #

如果页面中有多个type="slideshow"的div，可以用querySelectorAll获取所有匹配元素，然后遍历处理：

const allSlideshows = document.querySelectorAll('[type="slideshow"]');
allSlideshows.forEach(el => {
  initSlideshow(el);
});

这样就能确保你精准定位到目标div并执行特定代码啦～

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