如何查找页面中类名为myDIV的元素个数？

/请查看以下代码，告知我如何获取类名为"myDIV"的元素数量。我尝试过getelementbyid和childNodes.length，但都不起作用/

为啥之前的方法不行？ #

我懂你踩的坑：

• getElementById是专门通过元素ID查找的，你要找的是类名为myDIV的元素，所以这个方法完全不对路；
• childNodes.length会把所有子节点（包括空格、换行这类文本节点，甚至注释）都算进去，根本不是你要的目标元素数量。

两种靠谱的解决方案 #

下面给你两种常用的正确方法，直接抄就能用：

方法1：用getElementsByClassName

这个方法会直接返回所有匹配类名的元素集合（HTMLCollection），取它的length属性就是数量：

<div id="example">First div element with class="example" 
  <div class="fexample">First div element with class="example" 
    <div class="myDIV"> 
      <p>First p element in div.</p> 
      <p>Another p element in div.</p> 
    </div> 
    <div class="myDIV"> 
      <p>First p element in div.</p> 
      <p>Another p element in div.</p> 
    </div> 
    <div class="myDIV"> 
      <p>First p element in div.</p> 
      <p>Another p element in div.</p> 
    </div> 
  </div> 
</div> 
<script> 
function myFunction() { 
  // 获取所有类名为myDIV的元素
  const myDivElements = document.getElementsByClassName("myDIV");
  // 直接取length属性得到数量
  const count = myDivElements.length;
  console.log("类名为myDIV的元素有", count, "个"); // 这里会输出3
}

// 调用函数执行
myFunction();
</script>

方法2：用querySelectorAll

这个方法支持CSS选择器语法，用.myDIV就能选中所有类名匹配的元素，返回的NodeList同样可以通过length获取数量：

function myFunction() { 
  // 用CSS选择器选中所有.myDIV元素
  const myDivElements = document.querySelectorAll(".myDIV");
  const count = myDivElements.length;
  console.log("类名为myDIV的元素数量：", count); // 同样输出3
}

myFunction();

小细节提醒 #

• getElementsByClassName返回的是动态集合：如果之后DOM里的myDIV元素增加或减少，这个集合会自动更新；
• querySelectorAll返回的是静态集合：一旦获取就不会随DOM变化自动更新，适合不需要实时同步的场景。

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