javascript - JavaScript 可以创建无效的 DOM 是否正常？

Question

有点意外，我发现直接插入 tbody 中的跨度在使用 JavaScript (insertBefore) 完成时保持原位，如果使用文字 HTML 创建这种无效的 DOM 会导致跨度被放置在整个表格之前。

我预期要么会出现与文字 HTML 相同的行为，要么会抛出一些 DOM 异常。

例如这个 HTML

<table>
    <thead><tr><th>Table Header</th></td></thead>
    <tbody>
        <span>from HTML &rarr; goes up</span>
        <tr><td>Table Contents</td></tr>
    </tbody>
</table>

使用这个 JavaScript:

var span = document.createElement('span'),
    tbody = document.querySelector('tbody');
span.innerHTML = 'Created with JS → stays in place';
tbody.insertBefore(span, tbody.querySelector('tr'));

在标题和第一行之间呈现“用 JS 创建 → 保持原位”；原始的文字跨度移到表格之外。

这正常吗，我可以/应该指望这个吗？ (它在 FF、Chrome、Opera、IE >= 9(下面未测试)中的行为相同)。

此外，有没有办法查询 DOM 某种类型的内容(在正常情况下)在 DOM 中的某个点是否有效？当我发现这个怪癖(恕我直言，确实如此)时，这实际上是我想做的。

fiddle 在这里:http://jsfiddle.net/xr37g9kw/2/

Answer 1

至于“这正常吗，我可以/应该依靠这个吗？” 遗憾的是，是的。但大多数情况下，您应该了解您正在使用的节点类型。注意，对于 table，有一些不太知名的 DOM 方法(HTMLTableElement.rows.InsertRow() 等)。

至于“有没有办法查询 DOM 某种类型的内容是否(在正常情况下)在 DOM 中的某个点有效？” 没有内置的东西确切的目的，但您可以利用 JavaScript -> DOM API 的一个 native 功能:您可以让浏览器以“文字方式”重新解析 HTML block 。是的，我说的是 innerHTML。

在您的 fiddle 中，添加**tbody.outerHTML = tbody.outerHTML** "fixes" the structure ，因此您可以假设获取一些 DOM 节点，查看其 DOM 树，克隆，“重新评估”它并与原始节点进行比较。