事件 - htmx:beforeProcessNode

htmx:beforeProcessNode 是 HTMX 在将服务器返回的 HTML 插入页面之前，准备处理其中的每一个新 DOM 节点时触发的事件。

它是一个低层级的钩子（hook），可以让你：

• 检查每一个即将被插入的节点

• 修改、替换、跳过、清理节点

• 插入你自己的逻辑，比如跳过某些标签或注入自定义数据

事件参数

• detail.elt - 发送请求的元素

示例

忽略特定类名的节点不让它被插入

<button hx-get="/fragment" hx-target="#content" hx-swap="innerHTML">
  加载内容
</button>

<div id="content"></div>

<script>
  document.body.addEventListener("htmx:beforeProcessNode", function (event) {
    const node = event.detail.node;

    // 如果节点是包含 .skip 的元素，跳过它，不插入
    if (node.nodeType === 1 && node.classList.contains("skip")) {
      console.log("跳过插入节点：", node);
      event.preventDefault(); // 阻止处理这个节点
    }
  });
</script>

使用场景

用途	示例
跳过不想插入的元素	.skip、data-debug-only 等
局部 DOM 过滤	只保留响应中某些部分
插入前预处理	替换标签、注入数据、绑定事件
调试 HTMX 响应内容	控制台逐节点输出