javascript - 访问嵌套的 DocumentFragment

Question

我可以在 Chrome 的控制台中完美地导航元素，但我似乎无法使用childNodesor获得对嵌套 DocumentFragment 的引用firstChild。

这是 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需要也有一些混淆 - 使用上面的代码，您可能可以childNodes从console.log()语句中删除。