如何抓取并修改JS动态或周期性添加的HTML元素的CSS属性与内容？

一、抓取并修改动态添加元素的CSS/文本内容 #

针对JS动态或周期性添加的元素，有几种可靠的处理方式：

1. 使用MutationObserver监听DOM变化 #

这是最推荐的方法，能精准捕捉元素被添加到页面的瞬间，直接修改属性。针对你提供的代码，可监听body节点的子元素变化，一旦新img被添加就修改样式或内容：

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 遍历所有新增节点
    mutation.addedNodes.forEach((node) => {
      if (node.tagName === 'IMG') {
        // 修改CSS属性
        node.style.border = '5px solid red';
        node.style.margin = '10px';
        // 添加alt文本
        node.alt = '动态加载的图片';
      }
    });
  });
});

// 配置观察选项：监听子节点添加
observer.observe(document.body, {
  childList: true,
  subtree: false // 若元素可能被添加到body的子节点内，设为true
});

2. 拦截元素创建/添加过程 #

如果知道元素是通过document.createElement或appendChild创建的，可重写这些方法，在元素创建或添加时直接修改：

// 重写createElement方法
const originalCreateElement = document.createElement;
document.createElement = function(tagName) {
  const element = originalCreateElement.call(this, tagName);
  if (tagName.toLowerCase() === 'img') {
    // 提前设置样式
    element.style.border = '5px solid blue';
    element.alt = '预修改的动态图片';
  }
  return element;
};

// 或者重写appendChild方法
const originalAppendChild = Element.prototype.appendChild;
Element.prototype.appendChild = function(node) {
  if (node.tagName === 'IMG') {
    node.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
  }
  return originalAppendChild.call(this, node);
};

3. 定时轮询（不推荐，仅作备选） #

若上述方法不适用，可通过定时器定期查询目标元素并修改：

setInterval(() => {
  const imgs = document.querySelectorAll('img');
  imgs.forEach(img => {
    // 标记已修改元素，避免重复操作
    if (!img.dataset.modified) {
      img.style.border = '3px solid green';
      img.dataset.modified = 'true';
    }
  });
}, 1000);

二、能否让动态元素在「查看页面源代码」中显示？ #

答案是不能直接实现。因为「查看页面源代码」展示的是浏览器从服务器请求到的初始HTML文件内容，JS动态添加的元素仅存在于浏览器内存的实时DOM中，不会修改服务器上的原始HTML文件，也不会更新初始请求的HTML内容。

不过你可以通过以下方式查看包含动态元素的实时HTML：

• 打开浏览器开发者工具（按F12或Ctrl+Shift+I），切换到「Elements」面板，这里能看到当前页面完整的实时DOM结构，包括所有动态添加的元素。
• 在开发者工具控制台执行document.documentElement.outerHTML，复制输出内容即可得到当前页面的完整HTML快照（包含动态元素），但这不会改变「查看页面源代码」的显示内容。

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