jQuery(#id).val() vs. getElementById(#id).value

Question

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?

Answer 1

The biggest advantage of using jQuery().val() over document.getElementById().value is that the former will not throw an error if no elements are matched, where-as the latter will. document.getElementById() returns 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 .options[this.selectedIndex].value.

Answer 2

If you're using <select> elements as well, .value won't work whereas .val() will.

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.

Answer 3

jQuery does so many nice little error handling things (look below) that I would never write a line of javascript without jquery in a browser again.

• First, val works on checkbox groups, selects, gets html, and the like.
• Second, $ lets you use sizzle selectors, so in the future, you can easily switch between an ID and a CSS path.
• Third, your code will be so much easier to read and maintain if you just use jQuery, that the time you save maintaining your code outweighs any speedup that you admit your users won't see. Finally, jQuery is a very popular, very widely used library. They will make $ and val as fast as they can.

Answer 4

I think using pure Javascript is quicker for the following reasons:

1. You won't have to learn more than pure js
2. If you don't want errors, use catch(exeption) (I think...)
3. You don't have to put in that little extra time to type in the code to initiate jquery
4. The browser responds quicker if you don't use jquery
5. Normal js works (in a better way) on checkboxes @johndodo

Thank you for listening to my answer.

Answer 5

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 .val() method.

Answer 6

Here https://www.dyn-web.com/tutorials/forms/checkbox/same-name-group.php is an implementation for checkboxes, apparently options just need to be named the same with the array brackets notation in the name i.e.: name="sport[]" then yu get the array inJavascript via: var sports = document.forms['demoForm'].elements['sport[]']

I was looking for a selection type field solution without using jQuery and I came across this solution:

The Selection group is an object: HTMLCollection, and it has a lenght method and a selectedOptions property, which allows you to iterate through its label properties to populate an Array with the selected options, which then you can use:

...
    vehicleCol = document.getElementById('vehiculo').selectedOptions;
    vehiculos  = [];

    if (vehicleCol !== undefined) {
        for (let i = 0; i < vehicleCol.length; i++) {
            vehiculos.push(vehicleCol[i].label.toLowerCase())
        }
    }
...

Answer 7

I'd use jQuery's val(). Shorter code means faster download time (in my opinion).