DOM顺序是否始终一致?(Javascript)

Question

我想使用appendChild()来创建以下以网格格式访问的内容:

<div class="x">
    <div class="y">0-0</div>
    <div class="y">0-1</div>
    <div class="y">0-2</div>
</div>
<div class="x">
    <div class="y">1-0</div>
    <div class="y">1-1</div>
    <div class="y">1-2</div>
</div>
<div class="x">
    <div class="y">2-0</div>
    <div class="y">2-1</div>
    <div class="y">2-2</div>
</div>

然后，我将使用如下命令访问包含"2-1"的div:

var x2y1 = document.getElementsByClassName('x')[2].getElementsByClassName('y')[1];

你们知道IE6有什么问题吗?

Answer 1

getElementsByClassName是一个相当新的功能，我认为是在IE9中引入的。(就我个人而言，我从未使用过它，因为querySelector也可以做到这一点-而且在IE8中引入了更多!)

无论如何，顺序是为所有这些函数定义的。http://www.w3.org/TR/dom/#concept-getelementsbyclassname注意它说它搜索一个有序集合

也注意getElementsByClassName返回一个活动列表;DOM的更改会立即显示在结果中(这可能是它与querySelector(".classname")之间的关键区别——后者返回一个固定数组)。因此，如果修改元素，请小心循环条件和索引。很容易忘记，然后只看到一些节点，因为索引在您的脚下发生了变化!

Answer 2

相反，你可以给divs一个id属性，它将始终与:

保持一致

<div class="x">
    <div class="y" id="0-0">0-0</div>
    <div class="y"  id="0-1">0-1</div>
    <div class="y"  id="0-2">0-2</div>
</div>
var x0y2 = document.getElementById('0-2');

你不需要依赖DOM的顺序…