Question

我已阅读有关element.children的所有文档（例如MDN），但我无法让它在Google Chrome上正常运行。我正在使用的代码段：

<html><head>
    <script src="loadxmldoc.js"></script>
</head>
<body><script>
xmlDoc=loadXMLDoc("books.xml");

    document.write("<table border='1'>");
    var x=xmlDoc.getElementsByTagName("day");
    for (var i=0;i<x.length;i++){
    document.write("<td><table border='1'>");
    document.write("<tr><td>" + x[i].getAttribute("id") + "</td></tr>");

        var y=xmlDoc.getElementsByTagName("time");

        for (var j=0;j<y.length;j++){
            document.write("<tr><td><table border='1'>");
            document.write("<tr><td>Location: " + y[j].getAttribute("id") + ": ");
            document.write("</table></td></tr>");
    }
    document.write("</table></td>");
}
document.write("</table>");
</script></body></html>

问题是，getElementsByTagName每次都会y.length 16，而不是3,3,3,3,1。我确实使用了childNodes，但其中包含了文本元素。我使用了var y=x.item(i).children;，但它在Chrome上无效。它确实适用于FF，这让我相信Chrome不支持它，或者我错过了一些东西。但是，all documentation I've found表示这适用于Chrome。

这是.children的正确用法还是Chrome有问题？

Answer 1

我要感谢@Felix Kling帮助我解答答案。

仅供参考，.item在FF中工作的原因是FF返回一个 Chrome返回NodeList时的HTMLCollection。 -Felix Kling

.children仅适用于HTMLCollection。 NodeList需要手动完成。我挑选了元素节点并将它们放入一个数组中。

var x=xmlDoc.getElementsByTagName("day");
if(isFirefox){   //alternately, you can detect if HTMLCollection
    var y=x.item(i).children;
    document.write(y.length);
}
if(isChrome){    //alternately, you can detect if NodeList
    var y = new Array();
    var currentChild = x.item(i).firstChild;

    while(currentChild!=null){
        if(currentChild.nodeType == Node.ELEMENT_NODE){
            y[y.length]=currentChild;
        }
        currentChild=currentChild.nextSibling;
    }
}
for (var j=0;j<y.length;j++){
    /* loop */
}

Answer 2

在我的Chrome版本27上，以下工作正常：

[].forEach.call (document.body.children, function (e) { console.log (e); });

与Firefox 16一样

在http://jsfiddle.net/jstoolsmith/3rBTF/

上试用

Answer 3

尝试childNodes，一个标准属性。 children属性可能无法在所有浏览器中使用。

Element.children没有在Chrome上工作

3 个答案: