Javascript 访问嵌套的DocumentFragment

我可以在Chrome的控制台中很好地导航元素，但我似乎无法通过

childNodes

或

firstChild

获得嵌套DocumentFragment的引用

以下是JSFIDLE中的代码：

代码如下：

function withoutJquery(html)
{
    var temp = document.createElement("div");
    temp.innerHTML = html;

    var fragment = document.createDocumentFragment();
    var child;

    while (child = temp.firstChild)
    {
        fragment.appendChild(child);
    }

    return fragment.firstChild;
}


function withJquery(html)
{
    var fragment = document.createDocumentFragment();

    fragment.appendChild( jQuery.buildFragment([html],document) );

    return fragment.firstChild;
}


var ajaxHTML = "";
ajaxHTML += "<template>\n";
ajaxHTML += "    <div>asdf</div>\n";
ajaxHTML += "    <div>\n";
ajaxHTML += "        <span>asdf</span>\n";
ajaxHTML += "    </div>\n";
ajaxHTML += "</template>";


// Gives the <template>
console.log( withoutJquery(ajaxHTML) );
console.log( withJquery(ajaxHTML) );

// Where are the <div>'s?
console.log( withoutJquery(ajaxHTML).childNodes.length );
console.log( withJquery(ajaxHTML).childNodes.length );

不带jQuery（html）的函数 { var temp=document.createElement（“div”）； temp.innerHTML=html； var fragment=document.createDocumentFragment（）； var-child； while（child=temp.firstChild） { 片段。追加子对象（子对象）； } 返回fragment.firstChild； } 带有jQuery（html）的函数 { var fragment=document.createDocumentFragment（）； appendChild（jQuery.buildFragment（[html]，document））； 返回fragment.firstChild； } var ajaxHTML=“”； ajaxHTML+=“\n”； ajaxHTML+=“asdf\n”； ajaxHTML+=“\n”； ajaxHTML+=“asdf\n”； ajaxHTML+=“\n”； ajaxHTML+=“”； //给出 log（不带jquery（ajaxHTML））； log（withJquery（ajaxHTML））； //你的房间在哪里？ log（不带jQuery（ajaxHTML）.childNodes.length）； log（withJquery（ajaxHTML）.childNodes.length）；

---

尝试返回

fragment.firstChild.content

而不是

fragment.firstChild

由于浏览器之间的差异似乎很小，因此更好的解决方案如下：

var toReturn = fragment.firstChild;
return (toReturn.content ? toReturn.content : toReturn.childNodes);

---

浏览器似乎对是否也需要

childNodes

存在一些混淆-使用上述代码，您可能可以从

console.log（）

语句中删除

childNodes

。

您对最新console.log的预期结果是什么？因为它对我来说似乎很好（长度为5、2 div和3

\n

），如果可以使用jquery，可以使用上下文选择，即$（'nodes'，fragment）@皮耶。在Safari工作，但不是最新的Chrome@amchang87有趣的想法，但这不是转换为DOM，从而导致额外的回流吗？我不确定技术细节（我没有时间阅读jQuery源代码），但如果我记得正确，所有操作都发生在片段中，而不是主文档中。顺便说一句，如果你害怕表演，我就不会这么担心了。我想我最近已经检查了一些性能图表，它们已经针对类似于一行中的许多附件之类的内容，或者基本上是常量操作进行了优化。所以片段变得不那么有用，实际上速度也变慢了。但是你自己检查一下图表。这个有效：：fragment=（fragment.content）？fragment.content:fragment.childNodes；我想你只是想要这个：

fragment=（fragment.content）？fragment.content:fragment

因为您在函数外部调用childNodes。如果您提到删除函数后的childNodes，我认为这对人们来说更有意义：

var toreReturn=fragment.firstChild；返回（toReturn.content）？toReturn.content:toReturn.childNodes