如何获取由DocumentFragment创建并插入DOM的节点？

当然有几种不用数据属性就能拿到这些li元素的方式，具体可以根据场景选择：

• 创建时直接收集引用
  在循环创建li的过程中，把每个li存入一个数组，后续不管是否插入DOM，都能直接通过这个数组访问到所有新元素：

  const ul = document.querySelector("ul");
  const fruits = ["Apple", "Orange", "Banana", "Melon"];
  const fragment = new DocumentFragment();
  const newLis = [];
  
  for (const fruit of fruits) {
    const li = document.createElement("li");
    li.textContent = fruit;
    fragment.append(li);
    newLis.push(li);
  }
  
  ul.append(fragment);
  // 直接使用newLis数组即可获取所有新创建的li
  

• 从DocumentFragment中提前获取
  在把fragment插入DOM之前，它内部包含了所有新建的li元素，可以通过children或querySelectorAll方法提取这些元素的引用，即使之后fragment被清空，这些引用依然有效：

  const ul = document.querySelector("ul");
  const fruits = ["Apple", "Orange", "Banana", "Melon"];
  const fragment = new DocumentFragment();
  
  for (const fruit of fruits) {
    const li = document.createElement("li");
    li.textContent = fruit;
    fragment.append(li);
  }
  
  // 插入前获取fragment内的所有li
  const newLis = Array.from(fragment.children);
  ul.append(fragment);
  // 此时newLis仍能访问到已插入DOM的li元素
  

• 插入后从父元素筛选
  如果之前没保存引用，插入后可以通过父元素ul来定位新元素。比如根据插入位置（比如取最后N个元素，N等于fruits的长度），或者通过文本内容匹配（如果内容唯一的话）：

  ul.append(fragment);
  // 获取ul中最后4个li（对应fruits的长度）
  const newLis = Array.from(ul.children).slice(-fruits.length);
  
  // 或者通过文本内容筛选
  const newLis = Array.from(ul.querySelectorAll("li")).filter(li => fruits.includes(li.textContent));
  

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