js遍历td tr等html元素

要遍历HTML元素，需要使用JavaScript。以下是遍历<td>, <tr>及`<table>元素的完整攻略：

遍历<table>元素

首先需要获取<table>元素的引用。可以使用document.getElementById()或document.querySelector()方法。示例如下：

const table = document.getElementById('myTable');

或

const table = document.querySelector('#myTable');

接下来，可以使用table.rows属性获取<tr>元素的集合，然后使用for...of循环语句遍历所有的<tr>元素。示例如下：

const table = document.getElementById('myTable');

for (const row of table.rows) {
  // 处理每一行
}

遍历<tr>元素

要遍历每一行中的<td>元素，需要获取行的引用。可以使用table.rows属性获取行的集合，并使用索引访问每一行。示例如下：

const table = document.getElementById('myTable');
const row = table.rows[0];

for (const cell of row.cells) {
  // 处理每一个单元格
}

或者，可以使用querySelectorAll()方法获取每一行中的所有<td>元素的引用，并使用for...of循环语句遍历所有的<td>元素。示例如下：

const table = document.getElementById('myTable');
const cells = table.querySelectorAll('tr td');

for (const cell of cells) {
  // 处理每一个单元格
}

示例

以下是一个使用以上攻略遍历表格的示例：

<table id="myTable">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

const table = document.getElementById('myTable');

// 遍历每一行
for (const row of table.rows) {
  // 遍历每一个单元格
  for (const cell of row.cells) {
    console.log(cell.textContent);
  }
}

输出结果为：

1
2
3
4
5
6
7
8
9

希望这个攻略能够帮助你遍历HTML元素。