如何使用Javascript统计mainHolder下含内容的cellHolder类嵌套div数量

核心思路 #

1. 获取#mainHolder下所有带cellHolder类的div元素
2. 遍历每个元素，去除文本首尾空白字符后判断是否存在有效内容
3. 统计符合条件的元素总数

代码实现 #

基础遍历写法 #

// 获取所有目标元素
const cellList = document.querySelectorAll('#mainHolder .cellHolder');
let notEmptyCount = 0;

cellList.forEach(item => {
  // 去除首尾空格、换行后判断是否有有效文本
  if (item.textContent.trim().length > 0) {
    notEmptyCount++;
  }
});

console.log('非空div总数：', notEmptyCount);

简写写法 #

const notEmptyCount = Array.from(document.querySelectorAll('#mainHolder .cellHolder'))
  .filter(item => item.textContent.trim().length)
  .length;

注意事项 #

• 优先使用textContent而非innerText判断内容：textContent会获取所有节点的文本内容，不受样式影响，性能更优
• 必须调用trim()处理文本：你给出的空div内部存在换行、缩进等空白字符，直接判断长度会误判为非空

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