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

Answer 1

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 2

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 3

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

Answer 4

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 5

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 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())
        }
    }
...