使用 javascript/jQuery 操作 dom 元素属性的最佳方法答案

【问题标题】：Best way to manipulate dom element attributes with javascript/jQuery使用 javascript/jQuery 操作 dom 元素属性的最佳方法
【发布时间】：2012-02-22 14:26:33
【问题描述】：

我想要一些关于 dom 操作的回报。我认为我们可以通过多种方式保存元素的状态。例如，您想“插入”一个元素，我必须使用什么？：

将 css 类添加为“已插入”
使用 .data("inserted",true) 保存属性
将我的元素推送到包含所有“插入”元素的全局数组中
...

但是最好的方法是什么？也许解决方案是使用所有可能性。我不知道。

这是一个普遍的问题。我没有具体问题，但我开始开发一个巨大的 javascript 应用程序，我想选择我的规则 :)

【问题讨论】：

我很想知道有这些技术经验的人怎么说。好问题！
这真的取决于“选择”是什么意思。如果只是出于编程目的，由于 Javascript 对象只是关联数组，您可以将“selected”作为新成员添加到 DOMElement：someDOMElement.selected = true;
我认为这取决于您打算如何利用这些知识 - 但我也很好奇更有经验的人会说些什么。
我把 selected 改成了 insert，因为 selected 是 jQuery 中的一个关键词。

标签： javascript jquery dom

【解决方案1】：

您希望所选元素以特定方式显示吗？
--> 使用 css 类

是否要检查是否在代码中的不同位置选择了特定元素？
--> 使用.data

您想对所有选定的元素做些什么吗？
--> 使用数组。

如果你打算做以上的多件事情，你也可以结合这些方法。

【讨论】：

【解决方案2】：

如果你想要一个视觉元素伴随状态，那么 CSS 类是显而易见的方法。

数据元素也是一种非常有效的标记方式。

如果您想保持状态，那么将元素状态保存在 JSON 结构中可能是一个不错的选择。 JSON 数据是“主模型”，元素根据其模型呈现。 JSON 数据可以很容易地传递到服务器或下一页。

【讨论】：

【解决方案3】：

这是一个很难回答的问题，因为它确实取决于您的应用程序的需求。在任何给定时间，您需要评估多少个元素？一打？几千？选择这些元素时，您还需要对它们做什么？基本准则是：

除非确实需要更改元素的样式，否则不要添加 selected 类。
如果需要根据是否被选中来遍历一个元素，不要使用data()选项。
如果您不需要在多个简单调用中保留所选元素（变量或 localStorage 或其他），请不要将它们缓存在内存中。只有在性能显着提升或需要持久化数据时，管理所选元素数组的开销才值得。

那么，您真正需要如何处理这些元素？有了更多关于您的情况的信息，我们可以提出更好的建议。

【讨论】：

我没有具体案例，我只是试图找到制作好的javascript代码的最佳方法。我开始开发浏览器视频游戏，我需要很多 js :)

【解决方案4】：

对我来说，这取决于状态的用途......

如果布局根据选择而改变，我使用一个类
JS 逻辑（不仅仅是样式）-> 属性

我几乎不使用类将 js 逻辑添加到元素中...... css 的变化往往比底层的 javascript 文件更频繁。如果我在 js 中使用类，我会强迫自己将类名和选择器保留在 css 中，或者在需要更改时（例如因为使用另一个库或 css 模板）重做 js 和 css 中的所有元素选择

至于您的第三个选项，属性可以使用 jquery 选择器 $('*[selected]') 为您提供所有选定 alemens 的数组

【讨论】：

【解决方案5】：

如果事情变得复杂，我会将增强的 dom 元素放入“类”中

var InserttMe = function(element){
    this.element = element;
    this.inserted= false;
};
selectMe.prototype = {
    insert: function(){
       this.inserted= true;
       //do whatever you do with your element
    }
}

【讨论】：