我有一个用于歌剧的 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 { ... }
我对这一切有一种baaaad的感觉......
- DOM 和 html 布局之间还有其他很大的区别吗?
- 也许我真的应该
<tbody>
在 DOM 的东西中使用? - 你会怎么做?
奖金问题:
- 存在的理由是什么
createDocumentFragment()
?你能用它做什么,否则不能做?