I been searching but I can only find articles talking about one or the other. Which one is better?
I'm making a small web app where performance is not a big concern since there's nothing complex going on.
I considered using jQuery's
val() function since maybe it solves some inconsistency I'm not aware of, but
getElementById.value IS faster (although the end user won't notice.)
So which one should I use? Is jQuery's non-native method worth the lower performance to gain more compatibility?
The biggest advantage of using
document.getElementById().value is that the former will not throw an error if no elements are matched, where-as the latter will.
null if no elements are matched, where-as
jQuery() returns an empty jQuery object, which still supports all methods (but
val() will return undefined).
There is no inconsistency when using
.value for form elements. However, jQuery.val() standardises the interface for collecting the selected value in select boxes; where as in standard HTML you have to resort to using
If you're using
<select> elements as well,
.value won't work whereas
I would not mind about performance of just getting a value. If you want the best performance, perhaps you shouldn't use a library at all.
jQuery does so many nice little error handling things (look below) that I would never write a line of
jquery in a browser again.
valworks on checkbox groups, selects, gets html, and the like.
$lets you use sizzle selectors, so in the future, you can easily switch between an
jQuery, that the time you save maintaining your code outweighs any speedup that you admit your users won't see. Finally,
jQueryis a very popular, very widely used library. They will make
valas fast as they can.
I think using pure
jsworks (in a better way) on checkboxes @johndodo
Thank you for listening to my answer.
I've been looking into the performance differences with this recently and, slightly unsurprisingly, using vanilla JS to grab a value is faster than using jQuery. However, the fallbacks that jQuery provides to prevent errors, like what @Matt mentioned, is very useful. Therefore, I tend to opt for the best of both worlds.
var $this = $(this), $val = this.value || $this.val();
With that conditional statement, if
this.value tries to throw an error, the code falls back to the jQuery
I'd use jQuery's val(). Shorter code means faster download time (in my opinion).
©2020 All rights reserved.