Access dom object natively or via jQuery?

I see that people accessing dom objects sometimes natively or via jQuery obj开发者_StackOverflowects. I want to know best practices about it.

Example

function(element){
   $(element).attr('anyattribute');
   //Or
   element.anyattribute;
}

Which is prefered and why ?

In order to determine "best" you must first supply some criteria by which it might be judged. If you simply want to access DOM elements and do a small amount of processing, then it doesn't make much sense to use any kind of library. If your needs are more complex, then you should post what they are so that recommendations can be made that are appropriate for what you are trying to do.

For example, I've seen a 4,000 line library included in a page simply to validate a single form control. Accessing the control only takes one line of code anyway, so what was the point of including +90kb of extra script?

Much is made of "cross browser compatability" provded by libraries, but there are increasingly fewer and fewer issues and the vast majority of those that exist have been around for quite some time. They are well known and have well known work-arounds.

So if you post your requirements, then suggstions can be made to address those concerns rather than the usual "just use library X because that's what everyone else uses".

Via JQuery.

The only situation whereby if i have to choose between DOM manipulation and JQuery is when i am restricted to using only DOM. Otherwise, for cross browser compatibility reasons, i suggest looking at an abstraction library such as JQuery.

If you are using jQuery, never use direct DOM access unless something is not supported by jQuery which is extremely unlikely - and in that case submitting a patch to the jQuery guys or at least writing a custom jQuery plugin would be the better solution.

Note that the examples you have in your questions are not doing the same thing: The equivalent of elem.something is $(elem).prop('something'[, newValue]) and the DOM equivalent of $(elem).attr('something'[, newValue]) is elem.getAttribute('something') / elem.setAttribute('something', newValue).

However, jQuery's .attr() is smart enough (except in 1.6.0) to handle both props and attrs - but it's more performant if you use .prop() when dealing with properties such as checked or disabled.

If you're already using jQuery, then do things jQuery's way. That is, $(element).attr('name'). Cross-browser compatibility isn't really an issue with this; all browsers understand the DOM and mostly conform to its specs. The real thing here is consistency. You don't really need to get into the habit of doing stuff the jQuery way here, the DOM way over there, and some half-assed roll-your-own hacky way over yonder.

If you haven't included jQuery yet, i wouldn't do it now just to get an element's attribute. element.getAttribute('name') should always work. element.name will likely work for the important attributes, but note, "the important attributes" doesn't include everything! It almost never includes minor stuff like the "rel" attributes and such, or anything that's not standard HTML...and the property's value may differ from the attribute's, in order to be more useful to scripts. For example, the style property is actually an object containing the parsed CSS stles, not a raw string...and the selected property of an <option> is actually a boolean rather than "selected" or "". Sometimes the property and attribute even have different names! (The class attribute corresponds to a property called className, and any attribute with a - in it, if it corresponds to a property at all, will have the property's name changed so that it's compatible with JS's identifier naming rules. http-equiv, for example, becomes httpEquiv.) There's a bunch more gotchas like that. Just use getAttribute if you actually care about the attribute, and you're not already sucked in by jQuery's spiff.

If you actually care about, say, whether a checkbox is checked (that is, the properties of the element, as opposed to the string that's in its "checked" attribute), use element.checked or $(element).prop('checked') (and the same arguments apply there about jQuery vs vanilla JS).