Html 是否可以通过DOM直接使用header axis属性检索td的axis标头？

我最近发现，我可以使用

td

上的

headers

属性和任何相关

th

上的

axis

属性的组合，将表格单元格设置为具有多个轴。例如：

<table>
    <caption>Country Toy Codes</caption>
    <thead>
        <tr>
            <th scope="col row"></th>
            <th scope="col" id="us" axis="country">US</th>
            <th scope="col" id="ca" axis="country">CA</th>
            <th scope="col" id="uk" axis="country">UK</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" id="robots" axis="toys">Robots</th>
            <td headers="us robots">ABC</td>
            <td headers="ca robots">DEF</td>
            <td headers="uk robots">GHI</td>
        </tr>
        <tr>
            <th scope="row" id="dolls" axis="toys">Dolls</th>
            <td headers="us dolls">JKL</td>
            <td headers="ca dolls">MNO</td>
            <td headers="uk dolls">PQR</td>
        </tr>
        <tr>
            <th scope="row" id="slinkys" axis="toys">Slinkys</th>
            <td headers="us slinkys">STU</td>
            <td headers="ca slinkys">VWX</td>
            <td headers="uk slinkys">YZ1</td>
        </tr>
        <tr>
            <th scope="row" id="legos" axis="toys">Legos</th>
            <td headers="us legos">AB1</td>
            <td headers="ca legos">CD1</td>
            <td headers="uk legos">EF1</td>
        </tr>
    </tbody>
</table>

对于getter，我可以每次循环遍历每个头，然后从DOM中的id和axis值中找到元素，但是如果有更直接的方法，我相信它也会被浏览器优化

对于选择器，我能想到的最接近的方法（在js中）是获取给定的轴值，使用该轴值查找所有ID，然后用逗号分隔每个选项以获取它们，例如

[headers~=us], [headers~=ca], [headers~=uk]

---

有人知道标题id的轴名称是否可以通过方法或直接在

td

元素上使用吗？

这很有趣。我不会想象

td

在DOM中包含任何对

th

的引用，因为两者之间甚至没有直系后代-祖先关系，充其量只是兄弟关系。您最好为这种行为编写jQuery插件。

[headers~=us], [headers~=ca], [headers~=uk]