如何用Vanilla JS定位含‘Not Available’的HTML元素并添加类？

问题根源 #

你的代码逻辑完全偏离需求：

• 仅遍历body的直接子元素，范围错误
• 未检查元素是否真的包含Not Available文本，只要input是该值就给所有选中元素加类，导致父元素被错误标记

推荐方案：插入元素时直接处理（高效） #

在动态生成HTML元素的同时判断内容，直接给目标元素加类，无需事后全局查找：

// 处理空值的函数
const notAval = (input) => {
  return input ?? 'Not Available'; // 空值合并运算符更简洁
};

// 生成带样式类的元素
const createStyledElement = (tag, content) => {
  const elem = document.createElement(tag);
  const displayText = notAval(content);
  elem.textContent = displayText;
  
  // 内容为Not Available时添加类
  if (displayText === 'Not Available') {
    elem.classList.add('not-aval');
  }
  
  return elem;
};

// 使用示例：创建并插入h2元素
const heading = createStyledElement('h2', null);
document.querySelector('.content').appendChild(heading);

// 如果是拼接HTML字符串的场景
const generateHTMLString = (tag, content) => {
  const displayText = notAval(content);
  const classAttr = displayText === 'Not Available' ? 'class="not-aval"' : '';
  return `<${tag} ${classAttr}>${displayText}</${tag}>`;
};

// 示例：插入到指定容器
document.getElementById('card').innerHTML += generateHTMLString('p', undefined);

备选方案：事后查找已插入的元素 #

如果必须在元素插入DOM后再修正，需要遍历所有元素，检查元素自身的文本内容（排除子元素文本）是否匹配：

const notAval = (input) => {
  const displayText = input ?? 'Not Available';

  // 遍历所有元素，筛选直接包含目标文本的元素
  document.querySelectorAll('*').forEach(elem => {
    // 获取元素自身的文本节点内容（不含子元素文本）
    const ownText = Array.from(elem.childNodes)
      .filter(node => node.nodeType === Node.TEXT_NODE)
      .map(node => node.textContent.trim())
      .join('');

    if (ownText === displayText) {
      elem.classList.add('not-aval');
    }
  });

  return displayText;
};

关键说明 #

• 推荐方案性能更优，避免遍历整个DOM树，逻辑更直接
• 备选方案通过筛选文本节点，确保只选中直接包含Not Available的元素，不会误选父容器

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