Best way to manipulate dom element attributes with javascript/jQuery

Question

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? :

Add css class as "inserted"
Save an attribute with .data("inserted",true)
Push my element in a global array containing all "inserted" elements
...

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 :)

I'm curious to see what someone with experience in these techniques has to say. Good question! — random_user_name
– random_user_name, Commented Feb 22, 2012 at 14:28
It really depends on what "selected" means. If it's simply for programmatical purposes, since Javascript objects are simply associative arrays, you could add "selected" as a new member to the DOMElement: someDOMElement.selected = true; — crush
– crush, Commented Feb 22, 2012 at 14:29
I think it depends on what you plan to do with that knowledge - but I'm curious as well what more experienced people have to say. — josh.trow
– josh.trow, Commented Feb 22, 2012 at 14:31
I changed selected to inserted, because selected was a key word in jQuery. — Sebastien
– Sebastien, Commented Feb 22, 2012 at 14:32

Matthias · Accepted Answer · 2012-02-22 14:33:43Z

2

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.

answered Feb 22, 2012 at 14:33

Matthias

12.3k4 gold badges53 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Diodeus - James MacFarlane · Accepted Answer · 2012-02-22 14:34:32Z

2

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.

answered Feb 22, 2012 at 14:34

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Comments

glortho · Accepted Answer · 2012-02-22 14:38:14Z

0

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:

Don't add a selected class unless you really need to change the style of the element.
If you need to traverse to an element based on whether it has been selected or not, do not use the data() option.
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.

answered Feb 22, 2012 at 14:38

glortho

13.2k8 gold badges51 silver badges46 bronze badges

1 Comment

Sebastien Over a year ago

I don't have a specific case, i just try to find the best way to make a good javascript code. I am starting working on a browser video games and i will need a lot of js :)

Yoeri · Accepted Answer · 2012-02-22 14:39:04Z

0

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]')

answered Feb 22, 2012 at 14:39

Yoeri

1,91615 silver badges24 bronze badges

Comments

Andreas · Accepted Answer · 2012-02-22 14:41:55Z

0

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

answered Feb 22, 2012 at 14:41

Andreas

1,62214 silver badges13 bronze badges

Collectives™ on Stack Overflow

Best way to manipulate dom element attributes with javascript/jQuery

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related