如何获取并为无文本无类名的表格td元素分配已有类？

先排查querySelectorAll返回null的核心原因 #

1. DOM加载时机错误：如果JS代码在HTML渲染完tbody之前就执行，必然拿不到目标元素——比如把script放在head标签里却没做DOM加载监听，就会出现这种情况。
2. tbody内无预设tr/td：如果初始代码里tbody是空标签（仅<tbody></tbody>），自然找不到td元素，得先根据日历需求（通常6行7列共42个单元格）生成对应的tr和td。

分步实现方案 #

1. 确保代码在DOM就绪后执行

把JS代码放在<body>标签末尾，或者用DOM加载事件包裹逻辑：

document.addEventListener('DOMContentLoaded', () => {
  // 所有日历操作代码写在这里
});

2. 生成/获取tbody内的td元素

• 已有空tr/td的情况：
  直接用document.querySelectorAll('tbody td')即可拿到所有空td节点列表。
• tbody为空的情况（动态生成）：

  const tbody = document.querySelector('tbody');
  // 生成6行日历（最多6行可覆盖所有月份的日期排布）
  for (let i = 0; i < 6; i++) {
    const tr = document.createElement('tr');
    // 每行生成7个td（对应一周7天）
    for (let j = 0; j < 7; j++) {
      const td = document.createElement('td');
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }
  // 现在可以获取所有td元素
  const dateCells = document.querySelectorAll('tbody td');
  

3. 结合calendar-dates包分配日期与类名

先安装包：npm install calendar-dates，再引入并使用：

import { getCalendarDates } from 'calendar-dates';

// 获取当前月份的日历数据，也可指定年月：getCalendarDates(2024, 6)
const calendarData = getCalendarDates();

// 遍历日历数据与td元素，一一对应赋值
dateCells.forEach((cell, index) => {
  const { date, isCurrentMonth, isPrevMonth, isNextMonth } = calendarData[index];
  // 设置日期文本
  cell.textContent = date;
  // 添加对应类名
  if (isPrevMonth) {
    cell.classList.add('prev-month');
  } else if (isNextMonth) {
    cell.classList.add('next-month');
  } else {
    cell.classList.add('current-month');
  }
});

4. 后续根据文本/类名修改元素

比如修改当月15号的样式，或者批量修改上月日期的颜色：

// 根据文本+类名定位特定日期
const targetDate = Array.from(dateCells).find(cell => cell.textContent === '15' && cell.classList.contains('current-month'));
if (targetDate) {
  targetDate.style.backgroundColor = '#ffd700';
}

// 根据类名批量修改样式
document.querySelectorAll('.prev-month').forEach(cell => {
  cell.style.color = '#ccc';
});

关键注意事项 #

• 确保calendar-dates返回的数组长度（上月末尾天数+当月天数+下月开头天数）和td元素数量一致（一般为42个），避免数据不匹配。
• 切换月份时，要先清空tbody内的旧元素，再重新生成新的tr/td并赋值，防止重复创建节点。

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