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的混淆 - 使用上面的代码，您可以从childNodes语句中删除console.log()。

访问嵌套的DocumentFragment

1 个答案: