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

Question

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

• 将css类添加为“inserted”
• 使用.data保存属性（“inserted”，true）
• 将我的元素推入包含所有“inserted”元素的全局数组中
• ...

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

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

Answer 1

您是否希望以特定方式查看所选元素？
- >使用css-class

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

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

如果您打算执行上述各项操作，您还可以将这些方法结合起来。

Answer 2

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

数据元素也是标记某些内容的完美有效方式。

如果要保持状态，则在JSON结构中保存元素状态可能是一个不错的选择。 JSON数据是“主模型”，元素基于其模型呈现。 JSON数据可以轻松传递到服务器或下一页。

Answer 3

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

1. 除非您确实需要更改元素的样式，否则不要添加selected类。

2. 如果需要根据元素是否已选择遍历元素，请不要使用data()选项。

3. 如果您不需要它们持久进行多个简单调用，请不要将所选元素缓存在内存中（变量或localStorage或其他）。 管理所选元素数组的开销仅在您具有明显的性能提升或需要持久保存数据时才值得。

那么，你真的需要对这些元素做些什么呢？ 有关您的情况的更多信息，我们可以提出更好的建议。

Answer 4

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

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

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

至于你的第三个选项，一个属性可以给你一个使用jquery选择器$（'* [selected]'）的所有选定的alemens的数组

Answer 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
    }
}