Question

我有以下HTML：

<div style='direction:ltr'>

<table border=1 cellpadding=0 cellspacing=0 valign=top style='direction:ltr;
 border-collapse:collapse;border-style:solid;border-color:#A3A3A3;border-width:
 1pt' title="" summary="">
 <tr>
  <td style='border-style:solid;border-color:#A3A3A3;border-width:1pt;
  vertical-align:top;width:.6673in;padding:4pt 4pt 4pt 4pt'>
  <p style='margin:0in;font-family:Calibri;font-size:11.0pt'>1</p>
  </td>
  <td style='border-style:solid;border-color:#A3A3A3;border-width:1pt;
  vertical-align:top;width:.6673in;padding:4pt 4pt 4pt 4pt'>
  <p style='margin:0in;font-family:Calibri;font-size:11.0pt'>a</p>
  </td>
  <td style='border-style:solid;border-color:#A3A3A3;border-width:1pt;
  vertical-align:top;width:.5in;padding:4pt 4pt 4pt 4pt'>
  <p style='margin:0in;font-family:Calibri;font-size:11.0pt'>b</p>
  </td>
 </tr>
 <tr>
  <td style='border-style:solid;border-color:#A3A3A3;border-width:1pt;
  vertical-align:top;width:.6673in;padding:4pt 4pt 4pt 4pt'>
  <p style='margin:0in;font-family:Calibri;font-size:11.0pt'>2</p>
  </td>
  <td style='border-style:solid;border-color:#A3A3A3;border-width:1pt;
  vertical-align:top;width:.6673in;padding:4pt 4pt 4pt 4pt'>
  <p style='margin:0in;font-family:Calibri;font-size:11.0pt'>f</p>
  </td>
  <td style='border-style:solid;border-color:#A3A3A3;border-width:1pt;
  vertical-align:top;width:.5in;padding:4pt 4pt 4pt 4pt'>
  <p style='margin:0in;font-family:Calibri;font-size:11.0pt'>3</p>
  </td>
 </tr>
</table>

</div>

现在，我想遍历HTMLCollection并将给定标签映射到对象，并将其存储在数组中。 Fx。我想将每个p标签映射到{tag：'p'，text：element.innerHTML，children：[...]}。包括正确映射孩子。我在这里被困住，如何确保我拜访每个孩子？使用google之后，我遇到了两个术语：遍历和“遍历dom”。我不确定其中哪一个是正确的方法，或者不确定是否有其他途径我应该研究。我不是在寻找代码解决方案，而是希望能指出正确的方向。

感谢您的帮助和时间！

Answer 1

如果要迭代该表元素的所有子元素，则可以执行以下操作：

为表分配一个ID，以便更好地通过js获取，然后：
表格：var myTable = document.getElementById('myTable');
所有元素：myTable.getElementsByTagName("*");这将为您提供表格中所有的正文，tr，td和p

迭代HTMLCollection以获得所需的元素：

for(var i = 0; i < el.getElementsByTagName("*").length; i++){
  console.log(el.getElementsByTagName("*")[i])
}

遍历HTMLCollection并映射到Array

1 个答案: