JavaScript DocumentFragment 怎样在插入前查询内部元素

可以。DocumentFragment 还没有插入页面时，直接对它调用 querySelector()、querySelectorAll()，就能查询片段内部的后代元素；如果只按 ID 查找，也可以使用 getElementById()。最容易出错的地方是把片段插入宿主后才查询：插入动作会把子节点移走，片段本身随后不再保留这些元素。

DocumentFragment 的查询范围和最小写法

片段可以理解为一组暂存的 DOM 子节点。它不是页面中的普通元素，因此选择器的起点应该是片段对象，而不是 document。下面的例子先创建卡片，再在插入前读取标题和卡片数量：

const fragment = document.createDocumentFragment();

// 先把节点放入片段，避免逐个节点触碰页面结构。
const card = document.createElement("article");
card.className = "product-card";
const title = document.createElement("h2");
title.className = "product-title";
title.textContent = "无线键盘";
card.append(title);
fragment.append(card);

// 查询范围是 fragment，不会把页面中其他 .product-card 算进来。
const firstTitle = fragment.querySelector(".product-title");
const cards = fragment.querySelectorAll(".product-card");

console.log(firstTitle?.textContent); // 读取片段内的首个标题
console.log(cards.length); // 这里只统计片段中的匹配项

querySelector() 找不到节点时返回 null；querySelectorAll() 则返回长度为 0 的非实时列表。选择器字符串仍须符合 CSS 语法，类似 article[data-id='p-42'] 的属性选择器可以直接使用；如果 ID 或类名来自外部数据，应先考虑 CSS.escape()，不要把未经处理的字符串直接拼进选择器。

template.content 也能在插入前查询

使用模板时，template.content 本身就是一个 DocumentFragment。因此可以先从模板中找到需要补数据的节点，再把片段交给宿主容器：

const template = document.querySelector("#product-template");
const fragment = template.content.cloneNode(true);

// cloneNode(true) 后仍是片段，先查询其中的占位元素。
const nameNode = fragment.querySelector(".product-title");
if (!nameNode) {
  throw new Error("模板缺少 .product-title 节点"); // 让模板结构错误尽早暴露
}
nameNode.textContent = "无线键盘";

// replaceChildren 会接收片段中的子节点，fragment 随后不再持有它们。
document.querySelector("#products").replaceChildren(fragment);

这里的关键不是“模板必须先插入再改”，而是模板内容可以像普通片段一样在内存中完成查询和填充。若模板需要重复使用，应每次调用 cloneNode(true) 取得新的片段，不能把已经交给页面的同一个片段反复当作源对象。

插入后为什么再查不到，节点引用却还有效

调用 append(fragment) 或 replaceChildren(fragment) 时，片段的子节点会转移到宿主容器。此时再次执行 fragment.querySelector() 通常得到 null，因为片段已没有原来的后代节点；这不是查询失效，而是查询对象已经空了。

const fragment = document.createDocumentFragment();
const badge = document.createElement("span");
badge.className = "stock-badge";
badge.textContent = "有货";
fragment.append(badge);

// 在转移前保存引用，后面仍可通过它更新已移动的元素。
const savedBadge = fragment.querySelector(".stock-badge");
document.querySelector("#products").append(fragment);

console.log(fragment.querySelector(".stock-badge")); // null：片段已无子节点
savedBadge.classList.add("is-visible"); // 引用仍指向宿主中的 badge

因此，后续要继续查询页面内容，应改用宿主容器或保存下来的元素引用；后续要查询新的片段内容，则要在片段中重新创建或追加节点。

选择器和结果类型的边界速查

querySelectorAll() 返回的是静态快照，不会因为之后追加节点而自动增长。若逻辑先保存了列表、再向片段追加卡片，需要重新调用查询；若要监听页面未来新增节点，则应把查询放到明确的更新点，或使用事件委托和 MutationObserver，不要把静态列表误当成实时集合。

相关问题

DocumentFragment 能直接调用 querySelectorAll 吗？

能。它继承了可查询子树的方法，返回值是片段内部匹配元素组成的静态 NodeList。

为什么插入 fragment 后再次查询是空的？

插入会转移片段的子节点，片段对象保留但不再拥有那些节点。查询宿主容器，或复用插入前保存的元素引用即可。

选择器不合法时会怎样？

浏览器会抛出选择器语法异常。对外部传入的 ID、类名或属性值先用 CSS.escape() 处理，并在边界处捕获或记录错误。