在JavaScript中，HTML DOM（文档对象模型）允许你通过JavaScript来操作HTML文档的元素。对于表格（<table>）的表头（<thead>）部分，你可以使用TableHeader对象来进行操作。

以下是一个简单的例子，说明如何使用JavaScript和HTML DOM来访问和操作表头：
<!DOCTYPE html>
<html>

<head>
    <title>Table Header Example</title>
</head>

<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Cell 1</td>
                <td>Row 1, Cell 2</td>
                <td>Row 1, Cell 3</td>
            </tr>
            <tr>
                <td>Row 2, Cell 1</td>
                <td>Row 2, Cell 2</td>
                <td>Row 2, Cell 3</td>
            </tr>
        </tbody>
    </table>

    <script>
        // 获取表格
        var table = document.getElementById("myTable");

        // 获取表头
        var header = table.tHead;

        // 获取表头行
        var headerRow = header.rows[0];

        // 获取表头单元格
        var headerCells = headerRow.cells;

        // 遍历表头单元格并输出内容
        for (var i = 0; i < headerCells.length; i++) {
            console.log("Header " + (i + 1) + ": " + headerCells[i].innerHTML);
        }
    </script>
</body>

</html>

在这个例子中，首先通过getElementById方法获取表格元素，然后使用.tHead属性获取表头。接着，通过.rows属性获取表头行，再通过.cells属性获取表头单元格。最后，通过遍历表头单元格，可以获取并输出每个表头单元格的内容。


转载请注明出处：http://www.zyzy.cn/article/detail/6233/JavaScript 和 HTML DOM