DOM 遍历 table：无法在行上找到锚点

Question

我有一个 html table 这样的：

<!doctype html>
</head>
<body>

<table id="tableA">
    <a name="local1"><tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
    </tr></a>
    <a name="local2"><tr>
                <td>Cell 3</td>
                <td>Cell 4</td>
    </tr></a>
</table>   

</body>
</html>

锚点环绕 table 行，因为无法判断哪个单元格包含更多行文本内容，并且其中一个单元格的内容水平居中。所以使用锚点必须将页面带到行的顶部，而不是某个特定单元格中内容的顶部，否则必须在 js 中完成一些工作来确定在跳转后将滚动调整多少。

这行得通，但现在我需要使用 javascript 动态索引这些锚点，我注意到甚至遍历整个 table 像这样：

window.onload = function() {
    traverse(document.getElementById('tableA'));
}

function traverse (node) {
    var kids = node.children;
    if (!kids) return;
    var len = kids.length;
    for (var i = 0; i < len; i++) {
        traverse(kids[i]);
        alert(node.tagName+" "+kids[i].tagName);
    }
}

我一直找不到主播，却用一个简单的段落做同样的事情：

<p><a name="local3">blah blah</a>

锚点是段落的第一个子项。我能做什么？

Answer 1

正如 Claies 在第一条评论中指出的那样，这里的问题是这不是有效的 HTML。描述 HTML 5 的 W3C 建议给出了以下 内容模型 ("a normative description of what content must be included as children and descendants of the element") for tables:

In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed optionally by a tfoot element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element (but there can only be one tfoot element child in total), optionally intermixed with one or more script-supporting elements.

<tr> 元素之前没有 where 可以合法打开 <a>。

幸运的是，本地 link 工作不需要使用实际的锚标签：

<table id="tableA">
    <tr id="local1">
         <td>Cell 1</td>
         <td>Cell 2</td>
    </tr>

#local1 和以前一样工作，索引可以从 <tr> 元素生成。

DOM 遍历 table：无法在行上找到锚点

DOM traversal of table: Can't find anchors on rows

html

javascript

dom-traversal