HTML5 遍历所有的 TR 节点
在网页开发中，表格是一种常见的布局形式。表格通常由<table>标签构成，其中每一行由<tr>标签定义。随着HTML5的普及，使用现代JavaScript和DOM API操作这些元素变得更加方便。本文将探讨如何遍历所有的<tr>节点，并提供相关代码示例。
什么是 TR 节点？
<tr>节点代表表格中的行，通常嵌套在<table>标签中，并由<td>（单元格）标签构成。遍历这些节点可以帮助我们实现许多功能，比如动态修改表格内容、计算总和、筛选数据等。
获取 TR 节点的方法
在HTML5中，使用JavaScript来遍历<tr>节点通常通过以下几种方式实现：
- 使用
document.querySelectorAll()方法。 - 使用
getElementsByTagName()方法。
这两种方法都能够有效地获取所有的TR节点。下面是一个示例代码，展示如何遍历所有TR节点并读取每个单元格的内容。
示例代码
以下是一个基本的HTML表格示例及其JavaScript代码，用于遍历所有的 tr 节点：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遍历 TR 节点示例</title>
</head>
<body>
<table id="myTable">
<tr>
<td>行1，单元格1</td>
<td>行1，单元格2</td>
</tr>
<tr>
<td>行2，单元格1</td>
<td>行2，单元格2</td>
</tr>
<tr>
<td>行3，单元格1</td>
<td>行3，单元格2</td>
</tr>
</table>
<script>
// 方法1: 使用 querySelectorAll()
const rows = document.querySelectorAll('#myTable tr');
rows.forEach(row => {
const cells = row.getElementsByTagName('td');
for (const cell of cells) {
console.log(cell.textContent);
}
});
// 方法2: 使用 getElementsByTagName()
const rows2 = document.getElementById('myTable').getElementsByTagName('tr');
Array.from(rows2).forEach(row => {
const cells = row.getElementsByTagName('td');
for (const cell of cells) {
console.log(cell.textContent);
}
});
</script>
</body>
</html>
如何阅读代码
- HTML部分：定义了一个表格，有三行，每行有两个单元格。
- JavaScript部分：
- 第一种方法使用
querySelectorAll获取所有<tr>节点，然后通过forEach遍历每一行和单元格。 - 第二种方法使用
getElementsByTagName获取<tr>节点，继而转换为数组并遍历。
- 第一种方法使用
代码执行流程
接下来，我们用序列图简单展示代码执行的过程：
sequenceDiagram
participant User
participant Browser
participant JavaScript
User->>Browser: 打开网页
Browser->>JavaScript: 执行脚本
JavaScript->>Browser: 查询所有 TR 节点
Browser->>JavaScript: 返回 TR 节点列表
JavaScript->>JavaScript: 遍历 TR 节点
JavaScript->>Console: 打印单元格内容
小结
遍历HTML中的<tr>节点对于数据处理和表格动态更新是非常重要的。通过querySelectorAll()和getElementsByTagName()等方法，开发者可以获取并操作所有表格行的内容。以上示例展示了如何获取和输出每个单元格的内容。掌握这一技巧，可以为后续表格操作打开更多可能性。希望本文对你有所帮助！
