前端从JSON渲染日期遇阻：fromDateElemValue等返回null求助

问题背景 #

需要将JSON数组中的from_Date和to_Date数据渲染到对应HTML容器，实现鼠标悬停显示日期的交互，但执行时控制台提示fromDateElemValue和toDateElemValue为null，无法正常渲染日期。

常见导致元素为null的原因 #

• DOM未加载完成就执行JS：JS代码运行时目标容器还未被浏览器渲染，自然无法获取到元素
• 选择器错误：使用了错误的类名、ID，或者选择器层级逻辑错误，导致找不到目标元素
• 动态元素绑定时机不对：如果容器是动态生成的，未在元素生成后执行获取和赋值逻辑

修复方案与代码实现 #

1. 确保DOM加载完成 #

将JS代码包裹在DOMContentLoaded事件监听中，或放在HTML文档底部，保证所有容器节点已被渲染。

2. 精准关联数据与容器 #

利用HTML中已有的data-jsonData属性，将容器与JSON数组的索引绑定，精准定位对应的日期显示容器。

3. 完整交互代码 #

// 等待DOM完全加载后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 模拟后端返回的JSON数据
  const appData = [
    {
      app_Name: 'Application 1',
      to_Date: '2023-11-07T16:48:00',
      from_Date: '2023-11-09T14:47:00'
    },
    {
      app_Name: 'Application 2',
      to_Date: '2023-11-23T15:57:00',
      from_Date: '2023-11-24T15:57:00'
    }
  ];

  // 获取所有应用触发容器
  const appContainers = document.querySelectorAll('.appContainer');

  appContainers.forEach(container => {
    // 获取当前容器对应的JSON数据索引
    const dataIndex = parseInt(container.getAttribute('data-jsonData'));
    // 找到对应的隐藏详情容器
    const hiddenContainer = document.getElementById(`app${dataIndex + 1}`);

    // 鼠标悬停显示详情并填充日期
    container.addEventListener('mouseenter', function() {
      if (!hiddenContainer) return;

      // 在隐藏容器内部查找日期span元素
      const fromDateSpan = hiddenContainer.querySelector('.fromDate');
      const toDateSpan = hiddenContainer.querySelector('.toDate');

      if (fromDateSpan && toDateSpan) {
        // 格式化日期为友好显示格式
        const formatDate = (dateStr) => new Date(dateStr).toLocaleString();
        fromDateSpan.textContent = formatDate(appData[dataIndex].from_Date);
        toDateSpan.textContent = formatDate(appData[dataIndex].to_Date);
      }

      // 显示隐藏容器
      hiddenContainer.hidden = false;
    });

    // 鼠标离开隐藏详情
    container.addEventListener('mouseleave', function() {
      if (hiddenContainer) {
        hiddenContainer.hidden = true;
      }
    });
  });
});

关键修复说明 #

• DOM加载时机控制：通过DOMContentLoaded保证JS逻辑在所有DOM元素渲染完成后执行，避免元素未存在的问题
• 局部元素查找：在对应的hiddenContainer内部使用querySelector查找日期span，避免全局选择器可能带来的冲突或错误
• 空值防御：在操作元素前先判断元素是否存在，避免控制台抛出null报错

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