按类获取 div 的计数 - Javascript

在前端开发中，经常需要获取页面上特定类别元素的数量，比如获取某个页面上所有 class 为 "card" 的 div 元素的数量，这时候可以使用 Javascript 来实现。下面是一个示例代码片段，演示了如何实现这个功能。

// 获取页面上所有 class 为 "card" 的 div 元素
const cardDivs = document.querySelectorAll('.card');

// 打印出这些元素的数量
console.log(`There are ${cardDivs.length} divs with class "card" on this page.`);

代码解析

首先，我们使用 document.querySelectorAll 方法来获取页面上所有 class 为 "card" 的 div 元素。这个方法返回一个 NodeList 对象，它类似于数组，可以通过下标来访问其中的元素。我们把这些 div 元素保存在 cardDivs 变量中。

然后，我们使用模板字符串来输出这些元素的数量。模板字符串是 ES6 中新增的语法，它可以让我们在字符串中使用变量和表达式，用 ${} 包裹起来即可。

最后，我们使用 console.log 方法把字符串输出到浏览器控制台中。

总结

在这个示例中，我们演示了如何使用 Javascript 来获取页面上特定类别元素的数量。这个功能非常实用，可以帮助我们更好地操作页面，提高页面加载速度和用户体验。如果你还不熟悉 Javascript 和 DOM 操作，建议先学习相关基础知识，再尝试使用这个代码片段。