JavaScript获取querySelectorAll选中元素的数量

// 获取所有匹配元素的数量
const elements = document.querySelectorAll('选择器');
const count = elements.length;

console.log(`找到了 ${count} 个元素`);

<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>

<script>
// 获取所有 class="item" 的元素数量
const items = document.querySelectorAll('.item');
console.log(items.length); // 输出：3

// 获取所有 <p> 标签的数量
const paragraphs = document.querySelectorAll('p');
console.log(paragraphs.length);

// 获取特定容器内的元素数量
const containerItems = document.querySelectorAll('.container .item');
console.log(containerItems.length);
</script>

// 方法1：直接获取数量
const count1 = document.querySelectorAll('.item').length;

// 方法2：先获取NodeList再获取长度
const nodeList = document.querySelectorAll('.item');
const count2 = nodeList.length;

// 方法3：转换为数组后获取长度（如果需要使用数组方法）
const array = Array.from(document.querySelectorAll('.item'));
const count3 = array.length;

// 方法4：使用扩展运算符
const count4 = [...document.querySelectorAll('.item')].length;

// 检查是否存在元素
if (document.querySelectorAll('.item').length > 0) {
    console.log('找到了元素');
}

// 统计特定条件下的元素数量
const visibleItems = document.querySelectorAll('.item:not(.hidden)');
console.log(`可见项目数：${visibleItems.length}`);

// 动态更新计数
function updateCount() {
    const count = document.querySelectorAll('.item').length;
    document.getElementById('counter').textContent = `总数: ${count}`;
}