CODEWITHSUNDEEP
javascriptjquerydom
Sebastien
Sebastien

Reputation: 6660

Best way to manipulate dom element attributes with javascript/jQuery

I want some return about dom manipulation. I think we can save elements' status in several ways. For exemple, you want to make an element "inserted", what do i have to use? :

But what is the best way? Maybe the solution is to use all possibilities. I don't know.

That's a general question. I don't have a specific problem, but i am starting developing a huge javascript application and i want to choose my rules :)

Upvotes: 3

Views: 753

Answers (5)

Andreas
Andreas

Reputation: 1622

if things get complicated I put enhanced dom elements into "classes"

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

Upvotes: 0

Yoeri
Yoeri

Reputation: 1906

For me this depends on what the use of the status will be...

  • If layout changes depending on selected, i use a class
  • JS logic (more than only styling) -> atribute

I hardly use classes to add js logic to elements ... css tends to change more often than the underlying javascript files. In case I use classes in js, I force myself to keep the classnames and selectors in css or just redo all element-selection in both js and css when one needs to change (for instance because of using another library or css templates)

as for your third option, an attribute can give you an array of all selected alemens useing a jquery selector $('*[selected]')

Upvotes: 0

glortho
glortho

Reputation: 13198

This is a hard question to answer generally because it really depends on the needs of your application. How many elements do you need to evaluate at any given time? A dozen? A few thousand? What else do you need to do with these elements when you select them? Basic guidelines are:

  1. Don't add a selected class unless you really need to change the style of the element.

  2. If you need to traverse to an element based on whether it has been selected or not, do not use the data() option.

  3. Do not cache the selected elements in memory (variables or localStorage or whatever) if you don't need them to persist for more than one simple call. The overhead of managing your array of selected elements is only worth it if you have a noticeable performance gain or need to persist the data.

So, what do you really need to do with these elements? With more information about your situation, we can make a better recommendation.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

If you want a visual element to accompany the status, then the CSS class is the obvious way to go.

Data elements are a perfectly valid way of tagging something as well.

If you want to persist state, then saving element status in a JSON structure may be a good option. The JSON data is the "master model" and the elements are rendered based on its model. The JSON data can be passed to the server or to the next page easily.

Upvotes: 2

Matthias
Matthias

Reputation: 12259

Do you want selected elements to look in a specific way?
--> Use the css-class

Do you want to check whether a specific element is selected at a different place in code?
--> Use .data

Do you want to do something to all selected elements?
--> Use an array.

If you plan to do multiple of the things above, you can also combine the approaches.

Upvotes: 2

Related Questions