父元素h4.undefined无文本时隐藏图标，现有JS代码报错求解决

问题描述 #

需要实现逻辑：当h4.undefined容器内无有效文本内容时，隐藏其中的.icon-calendar图标；若存在有效文本则保留图标显示。原JavaScript代码因节点操作逻辑错误，控制台报错Cannot read properties of undefined (reading 'style')，无法实现需求。

原代码问题分析 #

1. childNodes使用不当：HTML中的换行、空格会被解析为空白文本节点，childNodes[1]的索引位置不稳定，可能指向不存在的节点，导致报错。
2. 文本判断逻辑不严谨：直接使用textContent.includes('undefined')和childNodes.length判断，无法准确识别是否存在有效文本（空白字符会被误判为内容）。
3. 全局查找图标：若使用全局document.querySelectorAll('.icon-calendar')，会修改所有图标状态，不符合仅操作当前h4内图标的需求。

正确实现方案 #

方案一：原生JavaScript（推荐） #

通过精准的节点查找和有效文本判断，实现需求：

// 获取所有目标h4元素
const targetH4s = document.querySelectorAll('h4.undefined');

targetH4s.forEach(h4 => {
  // 过滤空白字符，判断是否存在有效文本
  const hasValidText = h4.textContent.trim() !== '';
  // 查找当前h4内的日历图标（仅操作当前容器内的元素）
  const calendarIcon = h4.querySelector('.icon-calendar');

  // 确保图标存在再操作，避免报错
  if (calendarIcon) {
    calendarIcon.style.display = hasValidText ? 'inline' : 'none';
  }

  // 可选：隐藏内容为"undefined"的h4（原代码需求）
  if (h4.textContent.trim() === 'undefined') {
    h4.style.display = 'none';
  }
});

代码说明 #

• textContent.trim()：去除文本首尾空白字符，准确判断是否存在有效内容。
• h4.querySelector('.icon-calendar')：仅在当前h4容器内查找图标，避免影响其他元素。
• 先判断图标是否存在再设置样式，彻底避免Cannot read properties of undefined报错。

方案二：CSS（兼容性需注意） #

若浏览器支持CSS :has伪类（Chrome 105+、Firefox 121+），可直接用CSS实现，无需JS：

/* 当h4.undefined内除了图标和注释外无其他内容时，隐藏图标 */
h4.undefined:not(:has(:not(i):not(comment))) .icon-calendar {
  display: none;
}

/* 可选：隐藏内容为"undefined"的h4 */
h4.undefined:has-text("undefined") {
  display: none;
}

注：:has-text是实验性特性，若需兼容更多浏览器，优先选择JS方案。

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