迭代标记的childred

Question

我有这个：

var thead = document.getElementById("my_table").getElementsByTagName("thead")[0];

// =>
<thead>
  <tr>
    <th ....
    <th ....
    <th ....

现在我如何通过索引选择或找到“th”？ thead.children[0]返回整个“tr”，thead.children[0][0]未定义。我怎样才能到达“th”节点？

Answer 1

您可以使用元素的children属性来访问元素的子元素：

var thead = document.getElementById("my_table").getElementsByTagName("thead")[0].children[0].children;

表示

  

在my_table中找到thead代码，获取其第一个子代（tr）并返回其子代的数组

现在，您将能够遍历它们：

for (var i = 0; i < thead.length; i++)
{
    console.log(thead[i]);
}

更方便的方法是使用querySelectorAll和CSS选择器：

var thead = document.querySelectorAll('#my_table > thead > tr > th');
for (var i = 0; i < thead.length; i++)
{
    console.log(thead[i]);
}

这是working JSFiddle demo。