通过AJAX获取HTML格式帖子时，统计<article>帖子数量误计为字符数的技术咨询

你遇到的问题很典型——因为data是字符串类型，data.length自然会返回字符串的字符总数，而不是你要的<article>元素数量。这里有两种简单可靠的解决方案：

方案1：直接从已插入的DOM容器中统计 #

既然你已经把HTML内容插入到了.js-filter-grid容器里，直接从这个容器中查询目标元素是最直接的方式：

const container = document.querySelector(".js-filter-grid");
const counterContainer = document.querySelector(".js-filter-counter");
fetch(ajax_url)
  .then((response) => response.text())
  .then((data) => {
    if (data) {
      // 加载帖子到容器中
      container.innerHTML = data;
      // 统计容器内带post类的article元素数量
      const postCount = container.querySelectorAll("article.post").length;
      counterContainer.innerHTML = postCount;
      console.log(postCount);
    }
  })

这里用querySelectorAll("article.post")可以精准匹配所有目标帖子元素，避免统计页面中其他无关的<article>标签。

方案2：先解析HTML字符串再统计（不依赖DOM插入） #

如果你的场景需要先统计数量再决定是否插入DOM，可以用DOMParser在内存中解析HTML字符串，提前完成统计：

const container = document.querySelector(".js-filter-grid");
const counterContainer = document.querySelector(".js-filter-counter");
fetch(ajax_url)
  .then((response) => response.text())
  .then((data) => {
    if (data) {
      // 用DOMParser解析HTML字符串
      const parser = new DOMParser();
      const htmlDoc = parser.parseFromString(data, "text/html");
      // 在解析后的文档中统计目标元素数量
      const postCount = htmlDoc.querySelectorAll("article.post").length;
      
      // 之后再插入DOM（如果需要）
      container.innerHTML = data;
      counterContainer.innerHTML = postCount;
      console.log(postCount);
    }
  })

这种方法适合需要先根据数量做逻辑判断的场景，比如数量为0时显示“暂无帖子”提示。

两种方法都能准确统计你需要的帖子数量，根据实际需求选择就好～

内容的提问来源于stack exchange，提问作者Mathieu Préaud