如何自动检测含data-wow-delay属性的HTML标签并添加wow bounce类

你可以通过DOM属性选择器匹配所有携带data-wow-delay属性的元素，批量添加指定类名即可，支持全类型标签匹配，不需要单独指定标签种类。

基础版本（仅处理页面初始加载的元素） #

适用于所有data-wow-delay属性都是页面初始渲染就存在的场景：

document.addEventListener('DOMContentLoaded', () => {
  // 选中所有带data-wow-delay属性的元素
  const targetElements = document.querySelectorAll('[data-wow-delay]');
  targetElements.forEach(el => {
    // 批量添加类，已存在的类不会重复添加
    el.classList.add('wow', 'bounce');
  });
});

进阶版本（支持动态新增元素自动识别） #

如果页面会异步加载内容、或者用户交互会动态插入带data-wow-delay属性的元素，可以配合MutationObserver做全局监听：

// 先处理页面初始已有的元素
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-wow-delay]').forEach(el => el.classList.add('wow', 'bounce'));
});

// 监听后续DOM变化
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      // 仅处理元素类型节点
      if (node.nodeType !== Node.ELEMENT_NODE) return;
      // 处理当前新增节点本身
      if (node.hasAttribute('data-wow-delay')) {
        node.classList.add('wow', 'bounce');
      }
      // 处理新增节点的所有子元素
      node.querySelectorAll('[data-wow-delay]').forEach(child => child.classList.add('wow', 'bounce'));
    });
  });
});

// 启动全局监听
observer.observe(document.documentElement, {
  childList: true,
  subtree: true
});

内容的提问来源于stack exchange，提问作者noxin D invictus