js遍历td tr等html元素

在JavaScript中，遍历HTML中的``和``元素通常涉及到使用DOM（文档对象模型）API。这里有两种常见的方法来实现这一点：使用`getElementsByTagName`或`querySelectorAll`。以下是一些示例代码，展示了如何遍历这些元素。

### 使用`getElementsByTagName`

`getElementsByTagName`方法返回文档中所有指定标签名的元素集合，作为一个HTMLCollection对象。

// 假设我们有一个表格的id为"myTable"
var table = document.getElementById("myTable");

// 获取所有的tr元素
var rows = table.getElementsByTagName("tr");

// 遍历tr元素
for (var i = 0; i < rows.length; i++) {
    // 遍历每个tr中的td元素
    var cells = rows[i].getElementsByTagName("td");
    for (var j = 0; j < cells.length; j++) {
        // 对每个td元素进行操作，例如打印其内容
        console.log(cells[j].textContent);
    }
}

### 使用`querySelectorAll`

`querySelectorAll`方法返回文档中匹配指定CSS选择器的所有元素的一个静态（非实时）NodeList集合。

// 使用querySelectorAll选择所有的tr元素
var rows = document.querySelectorAll("#myTable tr");

// 遍历tr元素
rows.forEach(function(row) {
    // 使用querySelectorAll选择每个tr中的td元素
    var cells = row.querySelectorAll("td");
    
    // 遍历td元素
    cells.forEach(function(cell) {
        // 对每个td元素进行操作，例如打印其内容
        console.log(cell.textContent);
    });
});

这两种方法都可以有效地遍历HTML中的``和``元素。选择哪种方法取决于你的具体需求和偏好。`querySelectorAll`提供了更灵活的选择器语法，而`getElementsByTagName`则更直接地针对标签名进行操作。