如何识别DOM中details标签数量并换算对应关联方数量

首先修正HTML规范问题：原代码中多个details元素共用同一个id="party"不符合DOM规范，会导致元素选择异常，先修改为使用类名标识：

<!-- 把id改为class -->
<details class="party">
  <summary class="sub-header-style-1 pt-3 mb-4">
    Applicant(s) Information - {{ party.organization }} {{ party.firstName }} {{ party.lastName }}
  </summary>
</details>
<!-- 新增关联方总数展示位 -->
<div>页面涉及关联方总数：<span id="party-total">0</span></div>

方案1：数据源直接计算（优先推荐） #

你当前使用的是带插值语法的模板引擎（Vue/Angular/类似框架），details的渲染数量完全由关联方数据源决定，无需操作DOM即可直接拿到总数：

• 假设你渲染details用的关联方数组变量为parties，直接取parties.length就是关联方总数，直接插入到展示位即可，以Vue为例：

<div>页面涉及关联方总数：<span>{{ parties.length }}</span></div>

该方案性能最优、准确率最高，不会受DOM动态渲染延迟影响。

方案2：DOM统计实现 #

如果确实需要通过实际渲染的DOM元素数量计算，可按以下逻辑实现：

基础统计逻辑 #

function calcPartyTotal() {
  // 统计所有符合要求的details元素数量
  const detailsCount = document.querySelectorAll('details.party').length
  // 按规则计算关联方总数：4个details对应1个关联方
  const total = Math.floor(detailsCount / 4)
  // 渲染到页面展示位
  document.querySelector('#party-total').textContent = total
}

// 页面加载完成后执行一次统计
window.addEventListener('load', calcPartyTotal)

动态DOM监听适配 #

如果details是异步加载、动态增减的，可通过MutationObserver监听DOM变化自动更新总数：

// 假设所有details元素都放置在id为party-container的父容器内
const container = document.querySelector('#party-container')
const observer = new MutationObserver(calcPartyTotal)

// 开启监听：监听子节点增减、后代节点变化
observer.observe(container, {
  childList: true,
  subtree: true
})

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