如何使用querySelectorAll仅选中仅含day类的td元素？

核心解决思路 #

使用CSS的:not()伪类排除带有old、new类的元素，即可精准匹配仅包含day类的当月日期节点。

优化后代码 #

// 修正原代码两处语法错误，同时调整选择器
const tables = document.getElementsByTagName('table');
// 仅选择带day类、且不带old、new类的td元素
const currentMonthDays = tables[0].querySelectorAll('td.day:not(.old):not(.new)');

for (let i = 0; i < currentMonthDays.length; i++) {
     if(currentMonthDays[i].textContent.trim() === '28') {
         currentMonthDays[i].click();
         break; // 匹配到目标日期后直接终止循环，避免冗余遍历
     }
}

代码说明 #

• 选择器td.day:not(.old):not(.new)会自动过滤掉属于上月的old day和下月的new day节点，仅保留当月日期
• 新增trim()方法处理日期文本前后可能存在的空格，避免文本匹配失效
• 修正原代码两处语法错误：
  • getElementByTagName 需改为带s的 getElementsByTagName，该接口返回元素集合
  • for循环判断条件后误用的冒号:改为分号;

旧浏览器兼容方案 #

如果运行环境不支持:not()伪类（比如非常老的IE版本），可以在遍历阶段做类名判断：

const tables = document.getElementsByTagName('table');
const allDayNodes = tables[0].querySelectorAll('td.day');

for (let i = 0; i < allDayNodes.length; i++) {
    const classList = allDayNodes[i].classList;
    if (!classList.contains('old') && !classList.contains('new') && allDayNodes[i].textContent.trim() === '28') {
        allDayNodes[i].click();
        break;
    }
}

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