Javascript 从insertAdjacentHTML文本中获取顶级DOM节点（不带父节点）_Javascript_Html

Javascript 从insertAdjacentHTML文本中获取顶级DOM节点（不带父节点）

javascript html

Javascript 从insertAdjacentHTML文本中获取顶级DOM节点（不带父节点）,javascript,html,Javascript,Html,假设我有： <body> <div class="root"> <div class="text1"></div> <div class="text2"></div> </div> </body> 我们可以通过两种方式处理： var targetHandle = document.querySelector('.root') var newNode1 = targetHand

假设我有：

<body>
  <div class="root">
    <div class="text1"></div>
    <div class="text2"></div>
  </div>
</body>

我们可以通过两种方式处理：

var targetHandle = document.querySelector('.root')
var newNode1 = targetHandle.lastElementChild
var newNode2 = document.querySelector('.root > .text3')

到目前为止还不错。但是如果

insertAdjacentHTML

的内容非常大并且包含许多节点：

var targetHandle = document.querySelector('.root')
targetHandle.insertAdjacentHTML( 'beforeEnd', `
  <div class="text3"></div>
  <div class="text4"></div>
  <div class="text5"></div>
`);

虽然这是找到这些节点的一种有效方法，但我们通过创建HTML作为获取它们的一种方式，对我们的解决方案做出了妥协

我真正想要的是一种方法来获取每个顶级节点的句柄，这些顶级节点被注入

insertAdjacentHTML

，但不需要父包装器：

var nodeList = [ ... ]

我有两个想法，到目前为止我并不热衷，因为我担心性能问题：

无论如何都要使用父包装器。将get句柄插入子节点后。将子级复制/粘贴到父级，删除父级
对我要粘贴到的树中的现有节点进行快照。插入后，拍摄另一个快照和差异以查找新节点

寻找其他想法！谢谢

,
从那里查询您的元素
只有在文档中插入DocumentFragment之后，才会有它的内容

const targetHandle=document.querySelector（'.root'）；
常量标记=`
`;
const elems=getInsertedElementsFromMarkup（targetHandle，markup，'beforeend'）；
要素forEach（（要素）=>{
elem.textContent='我刚被插入文档'；
});
函数getInsertedElementsFromMarkup（target，markup，position=“beforeend”）{
if（！（节点的目标实例））{
抛出新类型错误（“参数1不是节点”）；
}
if（标记类型！==“字符串”）{
抛出新的TypeError（'参数2不是DOMString'）；
}
//将标记转换为DocumentFragment
const frag=target.ownerDocument.createRange（）
.createContextualFragment（标记）；
//转换为数组，
//DocumentFragments不支持“：作用域”，HTMLCollection处于活动状态。。。
常量元素=[…碎片儿童]；
开关（位置）{
“开始前”案例：
target.parentNode.insertBefore（frag，target）；
打破
“后开始”案例：
target.insertBefore（frag，target.firstChild）；
打破
“后继”案例：
target.parentNode.insertBefore（frag，target.nextSibling）；
打破
默认值：/“在结束之前”
目标儿童（frag）；
}
//返回我们查询的节点，一旦它们在文档中
返回元素；
}

.root>div{
边框：1px实心；
高度：18px；
利润率：6px0；
}

首先为什么要将它们作为HTML插入，而不是创建所有节点并插入它们？构建模板引擎和状态管理器。状态管理器需要在更改状态时清理节点列表，模板引擎需要灵活地输入大量任意的html块。听起来模板引擎需要解析html本身。我要找的正是我不知道的API！谢谢

var targetHandle = document.querySelector('.root')
targetHandle.insertAdjacentHTML( 'beforeEnd', `
  <div class="parentToTheRescue">
    <div class="text3"></div>
    <div class="text4"></div>
    <div class="text5"></div>
  </div>
`);

var nodeList = [ ... ]