移动 DOM 元素的方法
我正在编写一个 Javascript 游戏作为对象和 AJAX 的练习。它涉及韦塞尔围绕航海主题网格的移动。尽管 wessels 位于对象数组中，但我需要操纵它们的图形表示，即它们的精灵。目前，从 DOM 角度来看，我选择在“td”元素中使用“img”元素。 从 UI 连续性的角度来看，建议使用 Javascript 以编程方式移动元素的方法：
(a) 删除“from”单元格的内部 html（td 元素）并重写“to”单元格的内部 html，
(b) 克隆 img 节点（精灵），从其父节点中删除原始节点，并将其附加到“to”单元格，或者
(c) 使用相对于精灵的表格元素的定位，忽略所有 td（尽管它们的背景 [颜色] 代表海洋深度）。
I am programming a Javascript game as an exercise in objects and AJAX. It involves movement of wessels around a nautical-themed grid. Although the wessels are in an array of objects, I need to manipulate their graphical representation, their sprites. At the moment I have chosen, from a DOM perspective, to use 'img' elements within 'td' elements.
From a UI continuity perspective, which method of programmatically moving the elements with Javascript would be recommended:
(a) deleting inner html of 'from' cell (td element) and rewriting inner html of 'to' cell,
(b) clone the img node (sprite), delete the original node from its parent, and append it to the 'to' cell, or
(c) using positioning relative to the table element for the sprite, ignoring the td's alltogether (although their background [color] represents the ocean depth).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我肯定会坚持将精灵从一个单元格移动到另一个单元格，而不是使用相对于表格的定位。我的理由是，表格单元格大小可能因浏览器而异（考虑到填充、边距等渲染方式的差异 - 特别是对于烦人的 IE），并计算放置精灵的确切位置，以便使其在其中对齐给定的单元格可能会变得复杂。
这将您的选择范围缩小到 (a) 或 (b)。这里让我们消除选项 (a)，因为从内部删除 HTML 并不是操作 DOM 的干净方法。我喜欢将节点存储在对象中，然后将其附加到“to”单元格，然后删除原始节点的想法，正如您的选项（b）所建议的那样。这样，您仍然在处理高级“对象”，而不是不必要的低级“文本”。您不需要弄乱文本 - 对于这样的应用程序，如果您不了解 JavaScript 已经提供的 DOM 操作功能，那么这将是肮脏的“hackish”方式。
我的答案是（b）。但是，如果您绝对需要速度 - 尽管对于您的游戏我不知道您是否真的需要额外的提升 - 您可以考虑选项 (a)。一些来源，例如 http://www.quirksmode.org/dom/innerhtml.html 认为 DOM 操作方法通常比使用 innerHTML 慢。但这是一切事物的一般规则。您的级别越低，编写代码的速度就越快。级别越高，代码就越容易理解和概念化，在我看来，由于速度在这种情况下不会产生巨大的差异，所以保持整洁并使用 (b)。
I would definitely stick with moving the sprite from cell to cell rather than using relative positioning to the table. My reasoning is that the table cell size might vary from browser to browser (given variances in the way padding, margins etc. are rendered - especially with annoying IE) and calculating the exact location to position the sprite in order for it to line up within a given cell might get complicated.
That narrows it down to (a) or (b) for your options. Here let's eliminate option (a), as deleting the HTML from inside is not a clean way of manipulating the DOM. I like the idea of storing the node in an object, and then appending it to the 'to' cell, and then deleting the original node, which your option (b) suggests. This way, you are still dealing with the high-level 'objects' and not the low-level 'text' needlessly. You don't need to mess with the text - for such an application, that would be the dirty 'hackish' way of doing it if you didn't know about the DOM manipulation functions JavaScript already offers.
My answer is (b). However, if you absolutely require speed - though for your game I don't know if you'll really need the extra boost - you may consider option (a). A few sources, such as http://www.quirksmode.org/dom/innerhtml.html contend that the DOM manipulation methods are generally slower than using innerHTML. But that's the general rule with everything. The lower the level you go, the faster you can make your code. The higher the level, the easier to understand and conceptualize the code is, and in my opinion, since speed will not make a huge difference in this case, keep it neat and go with (b).
无需克隆 img 节点、删除旧节点并附加克隆。只需将 img 节点附加到接收 td 即可。它将自动从之前所在的 td 中删除。简单、有效且快速。
There's no need to clone the img node, delete the old one and append the clone. Just append the img node to the receiving td. It will automatically be removed from the td it was previously in. Simple, effective and fast.