用 innerHTML 加载 html 片段的奇怪问题

Question

我有一个用于 Opera 的 userjs 脚本，它显示自己的界面，目前使用 DOM 方法来创建元素。这很好用，但由于接口与代码相关联，因此难以维护。所以我正在寻找一种将布局与代码分开的方法。此外，我想让事情保持简单，并且真的不想为此依赖框架（jquery ...）。我不关心跨浏览器的功能，反正这个东西只能在opera上运行。

我将所有样式的东西都放到了 CSS 中，这很有帮助。现在我正在寻找一种抽象布局的方法。 UI 的很大一部分是动态的，所以我不能只使用一个大的静态 html。提出的想法是制作一段 html，其中包含不同 UI 部分的布局，从中提取片段并根据需要将所有内容放在一起。

这在某种程度上效果很好：

• 创建一个div，永远不要作为其父项。
• 使用.innerHTML将html加载到其中
• 使用此getElementsByClassName() 在其中查找小部件
• 用widget.cloneNode(true)克隆它们
• 父母等等...

我知道cloneNode() 存在一些问题（重复 ID 的风险，以及克隆中缺少事件处理程序），但我可以解决这些问题。

问题是，在加载.innerHTML 时，我会从当前的 DOM 代码中得到不同的结果，即使我使用的是 DOM 代码版本中的捕获布局！例如，我在表格中看到了这一点。对于一个简单的

<table><tr><td></td></tr></table>

innerHTML 版本在蜻蜓中出现<tbody> 标签，因此像这样的 css 规则不再适用：

table > tr > td { ... }

我对这一切有一种不好的感觉......

• DOM 和 html 布局之间还有其他重大区别吗？
• 也许我真的应该在 DOM 中使用 <tbody> 吗？
• 你会怎么做呢？

额外问题：

• createDocumentFragment() 存在的原因是什么？你能用它做什么，否则不能做？

Answer 1

你是对的，它看起来像一个标记没有定义 <tbody> 的表格，在读取表格的 innerHTML 属性时将转换为带有 <tbody> 标记的标记。

但这不会给您带来太多麻烦：至于 CSS 问题，请从您的选择器中删除 >（仅限直接后代）。

DocumentFragment 的一个可能的好处是，当您需要进行大量 DOM 操作时，如果仅操作文档片段并且一旦完成所有转换，则将其附加到 DOM 可能会带来一些性能提升。