javascript - 如何使用 querySelectorAll javascript 访问具有相同 id 的第二个 div？

Question

在这里，我的网页上有两个 div，这两个 div 具有几乎相同的数据。 接受类型属性。

我的第一个 div 属性有 type="timeline"。 第二个 div 属性类型为“slideshow”。

当我的页面加载时，它只检测到第一个 div。

但是我有一个条件，如果我的 div 类型等于幻灯片，那么我的代码会运行，但它只检测到第一个 div。

这是我的代码。

<div type='timeline' id='slide'>
  <section>
    <header>Title One</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Two</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Three</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Four</header>
    <article>Content</article>
  </section>
</div>

var divSlide = document.querySelectorAll('#slide');
var myNodeList = divSlide.length;
for(i = 0; i < myNodeList.length; i++) {
  var divMain = document.getElementById("slide");
  console.log(divMain);

  var align = divMain.getAttribute("type");
  console.log(align);
  console.log(myNodeList)

  if(align=='slideshow'){
    console.log("my working code");
  }
} 

我该怎么办。 帮助将不胜感激。

Answer 1

您的代码中有一些错误，我们需要首先修复。

首先，您不应在代码中多次使用相同的 id 值，因此您需要将 id 替换为类(即使我们的代码仍然可以在此处使用 id)。

第二个错误 - 在 for 循环中，您使用了错误的变量“myNodeList.length”，myNodeList 变量已经是长度，因此它没有 length 属性。您应该使用 divSlide 变量，如下所示:

for(i = 0; i < divSlide.length; i++)

第三个错误-为了访问正在循环的当前项目，您应该使用保存列表的变量(这里是divSlide)，然后添加将其 i 放在括号中以指示当前使用的索引，如下所示

  var divMain = divSlide[i];

  // instead of this: var divMain = document.getElementById("slide");

第四 - 在大多数情况下，您应该使用三个 = 符号来检查值。所以你应该使用===而不是==

这就是代码最终的样子:

 var divSlide = document.querySelectorAll('#slide');
 var myNodeList = divSlide.length;

 document.addEventListener("DOMContentLoaded", functionName)

 function functionName(){

    for(i = 0; i < divSlide.length; i++) {
    var divMain = divSlide[i];

    var align = divMain.getAttribute("type");

    if(align ==='slideshow'){
      console.log("my working code");
    }
 } 

}

and this is codepen example