Element.children无法在Chrome上运行
[英]Element.children not working on Chrome
问题描述
I've read all the documentation about element.children , (for example MDN ), and yet I can't get it to work properly on google Chrome. 
我已经阅读了有关element.children所有文档（例如MDN ），但仍无法在Google Chrome浏览器上正常运行。 The segment of code I'm working with: 我正在使用的代码段：
<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>
Problem is, getElementsByTagName makes y.length 16 every time, instead of 3,3,3,3,1. 问题是， getElementsByTagName每次使y.length 16，而不是3、3、3、3、1。 I did use childNodes , but that included text elements. 我确实使用了childNodes ，但是其中包含了文本元素。 I used var y=x.item(i).children; 我用var y=x.item(i).children; but it does not work on Chrome. 但不适用于Chrome。 It does work on FF, which leads me to believe that either Chrome doesn't support it, or I'm missing something in the head. 它确实可以在FF上运行，这使我相信Chrome不支持它，或者我脑子里缺少东西。 However, all documentation I've found says that this should work with Chrome. 但是， 我发现的所有文档都说这应该适用于Chrome。
Is this the correct usage of .children or is something wrong with Chrome? 这是.children的正确用法，还是Chrome出问题了？
3 个解决方案
解决方案1
1 已采纳 2013-07-06 16:55:38
I'd like to thank @Felix Kling for helping me with the answer. 我要感谢@Felix Kling为我提供的答案。
FYI, the reason why .item works in FF is that FF returns an HTMLCollection while Chrome returns a NodeList.
.children only works with HTMLCollection. .children只适用于的HTMLCollection。 NodeList need to be done manually. NodeList需要手动完成。 I picked out the element nodes and threw them into an array. 我挑选了元素节点并将它们放入数组中。
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 */
}
解决方案2
0 2013-07-06 17:26:26
On my Chrome version 27 the following works just fine : 在我的Chrome版本27上，以下工作正常：
[].forEach.call (document.body.children, function (e) { console.log (e); });
As it does on Firefox 16 就像在Firefox 16上一样
Try it on http://jsfiddle.net/jstoolsmith/3rBTF/ 在http://jsfiddle.net/jstoolsmith/3rBTF/上尝试
解决方案3
0 2013-07-06 19:51:22
Try childNodes , a standard property. 试试childNodes ，这是一个标准属性。 children property may not work in all browsers. children属性可能不适用于所有浏览器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.