无限滚动加载新元素后，如何让自定义DOM修改逻辑对新元素生效？

核心问题说明 #

• 初始修改逻辑仅在页面加载时运行一次，只能匹配到当时已存在的20个li元素，无限滚动动态新增的节点不会被自动处理
• DOMSubtreeModified属于已废弃的Mutation Events API，存在触发频率过高、性能损耗大、逻辑匹配精度低的问题，不符合现代浏览器标准，推荐使用标准MutationObserver监听DOM变更

原生JavaScript实现方案 #

首先封装可复用的修改逻辑，新增已处理标识避免重复修改元素：

// 通用元素修改函数
function modifyProductItems(container = document) {
  // 处理.signature-discount元素
  [...container.querySelectorAll('.signature-discount:not(.processed-signature)')].forEach(item => {
    item.innerHTML = '<span class="discount-value">new content</span>';
    item.classList.add('processed-signature');
  });
  // 处理.product-detail元素
  [...container.querySelectorAll('.product-detail:not(.processed-signature)')].forEach(item => {
    item.insertAdjacentHTML('beforeend', "<span class='signature-info'>more new content</span>");
    item.classList.add('processed-signature');
  });
}

// 替换为你页面中承载li的父级ul的实际选择器
const parentUl = document.querySelector('ul.your-ul-class');
if (parentUl) {
  // 初始化执行一次，处理默认加载的20个元素
  modifyProductItems(parentUl);

  // 定义DOM变更监听器
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 遍历所有新增节点
      mutation.addedNodes.forEach(node => {
        // 仅处理元素节点，跳过文本、注释等节点
        if (node.nodeType === 1) {
          modifyProductItems(node);
        }
      });
    });
  });

  // 启动监听，配置监听子节点新增、后代节点变化
  observer.observe(parentUl, {
    childList: true,
    subtree: true
  });
}

jQuery实现方案 #

// 封装修改逻辑
function modifyProductItems($container) {
  $container.find('.signature-discount:not(.processed-signature)').each(function() {
    $(this).html('<span class="discount-value">new content</span>');
    $(this).addClass('processed-signature');
  });
  $container.find('.product-detail:not(.processed-signature)').each(function() {
    $(this).append("<span class='signature-info'>more new content</span>");
    $(this).addClass('processed-signature');
  });
}

// 初始化执行，处理默认加载的元素
modifyProductItems($('body'));

// 替换为你页面中承载li的父级ul的实际选择器
const $parentUl = $('ul.your-ul-class');
if ($parentUl.length) {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === 1) {
          modifyProductItems($(node));
        }
      });
    });
  });
  observer.observe($parentUl[0], {
    childList: true,
    subtree: true
  });
}

额外提示 #

如果你能拿到无限滚动的加载成功回调函数，直接在回调内调用modifyProductItems即可，不需要额外监听DOM变更，性能更优。

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