如何实现页面中Topic模块的数量统计功能

作为编程新手，用原生JavaScript就能轻松实现这个统计功能，给你几个最容易上手的方案：

1. 直接在浏览器控制台快速验证 #

打开你的网页，按F12打开开发者工具，切换到「Console」标签，粘贴下面的代码回车，就能看到统计结果：

// 选中所有<h2>标签，获取它们的数量
const topicCount = document.querySelectorAll('h2').length;
console.log('Topic总数量：', topicCount);

document.querySelectorAll('h2')会抓取页面上所有的<h2>元素，.length属性就是这些元素的总数。

2. 把统计结果显示在网页上 #

如果想让访问者也能看到数量，可以把代码写在HTML页面里，放在<body>标签的末尾（确保页面元素都加载完再执行）：

<!DOCTYPE html>
<html>
<body>
  <h2>Topic 1</h2>
  <h2>Topic 2</h2>
  <h2>Topic 3</h2>
  <h2>Topic 4</h2>
  
  <!-- 用来显示统计结果的区域 -->
  <div>当前Topic总数量：<span id="countDisplay"></span></div>

  <script>
    // 等页面所有元素加载完成后执行统计
    document.addEventListener('DOMContentLoaded', function() {
      const allTopics = document.querySelectorAll('h2');
      const count = allTopics.length;
      // 把结果放到指定的span里
      document.getElementById('countDisplay').textContent = count;
    });
  </script>
</body>
</html>

保存后打开网页，就能看到自动显示的Topic数量。

3. 更精准的统计（避免误统计） #

如果以后你的页面里出现非Topic的<h2>标签，可以给所有Topic的<h2>加专属类名，比如<h2 class="topic">Topic 1</h2>，然后修改代码：

// 只选中带topic类的h2标签
const topicCount = document.querySelectorAll('h2.topic').length;

这样就不会统计到无关的<h2>元素了。

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