访问嵌套的DocumentFragment

Question

我可以在Chrome的控制台中很好地导航这些元素，但我似乎无法使用childNodes或firstChild获得对嵌套DocumentFragment的引用。

下面是jsFiddle中的代码：http://jsfiddle.net/Ge8au/2/

代码如下：

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 );

Answer 1

尝试返回fragment.firstChild.content而不是fragment.firstChild。

由于这似乎会因浏览器而略有不同，因此更好的解决方案可能如下所示：

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

对于是否也需要childNodes，浏览器似乎有些困惑--使用上面的代码，您可能可以从console.log()语句中删除childNodes。