Better practice Jquery vs Document.formname.formelement.value

Question

quick question.

I am currently doing some js (pre / front end validation) the question I have is which line of code is better to use. Myself I have always used this method.

 document.formname.forminput.value

Rather than

 $('formelement').val()

Which would you recommend that I use, I presume that the first method is better as it's not relying on an external library to commit the function ?

Thanks, Tony.

What about `document.getElementById('form_input_element_id').value` or even [`document.querySelector`](https://developer.mozilla.org/en-US/docs/DOM/Document.querySelector)/[`All`](https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll)? — Paul S., Apr 24 '13 at 11:24
You will always have overheads when using jquery, as it's a javascript library. In terms of performance, if something is easily doable in javascript, without the help of jquery, then do it. Check out the [second answer on this question](http://stackoverflow.com/questions/4651923/when-to-use-vanilla-javascript-vs-jquery) — billyonecan, Apr 24 '13 at 11:41

score 1 · Answer 1 · edited Apr 12 '17 at 07:31

It's what works for you.

If you only want to use plain JavaScript use:

document.formname.forminput.value

or

 document.getElementById('formelement').value

If you want to use the jQuery framework:

$('formelement').val()

Personally i like the jQuery way cause it's cleaner, but always know the plain JavaScript way if you use it.

Check out this post on stackexchange for a more detailed discussion about plain JavaScript vs jQuery: https://softwareengineering.stackexchange.com/questions/122191/what-benefits-are-there-to-native-javascript-development

score 1 · Answer 2 · answered Apr 24 '13 at 11:36

"Better" is hard to define. "Faster" would probably be the first, although adding an ID to the input field and calling $('#inputid') in jQuery might be faster. But the differences are so tiny that it wouldn’t make sense for any human to even consider micro-optimizing such a selector.

They are also equal when it comes to simply getting the value from a known input field, however jQuery does not throw exceptions if a DOM element is not found, whereas document.formname.forminput.value will throw an exception if formname does not exist in the DOM. jQuery’s .val() will simply return undefined if the DOM element is not found.

Needless to add, jQuery’s API including val() is more consistent between different input elements and browsers, and can also be used as a setter.

score 0 · Answer 3 · answered Apr 24 '13 at 11:23

Both are fine

if you are using document.formname.forminput.value, that means you are using plain javascript

But if you use $('formelement').val() it comes in jquery which is one of the framework of javascript. For using you should be downloading jquery.js and include it in your webpage.

score 0 · Answer 4 · answered Apr 24 '13 at 11:26

actually there is no proper answer for this... answer depends on the person using it..

the first one is plain javascript so as you said an external library files is not required..

whereas

second one is using jquery....

i would go with the second cause its short ,readable and cleaner

score 0 · Answer 5 · answered Apr 24 '13 at 11:30

Actually in Plain JavaScript you have

document.formname.fieldName.value
document.getElementsByName("fieldName")[0].value
document.getElementById("fieldID")[0].value

whereas similar access in jQuery would be

$("input[name='fieldName'"].val();

or

$("#fieldID"].val();

Be sure to know the differences

If you do not have jQuery in the page for other reasons than to get the values of form field, then in my opinion jQuery is not necessary. If however you are doing anything slightly complex and cross browsery, like Ajax or event handling, go for jQuery for all your needs on the page

David Thomas · Accepted Answer · 2013-04-24T11:46:35.103

According to JS Perf, the native DOM approach, with document.querySelector() is fastest, and the native DOM approach you post in your question the slowest. Presumably 'fast' correlates to efficient, and it seems, then, that selecting by id (as both the jQuery and document.querySelector() approaches use) is the fastest method of selection.

The JS Perf is linked below, and based on the following HTML:

<form action="#" method="post" name="trek">
  <fieldset>
    <label for="input1">
      Input One:
    </label>
    <input id="input1" value="An input, Jim; but just as we know it..." />
  </fieldset>
  <fieldset>
    <label for="input2">
      Input Two:
    </label>
    <input id="input2" value="'Beam me up, Scotty!' attributed to, but never said, in Star Trek."
    />
  </fieldset>
</form>

Native DOM:

var input1 = document.trek.input1.value,
    input2 = document.trek.input2.value;
console.log(input1, input2);

More DOM:

var input1 = document.getElementById('input1').value,
    input2 = document.getElementById('input2').value;
console.log(input1, input2);

Yet more DOM, d.qS:

var input1 = document.querySelector('#input1').value,
    input2 = document.querySelector('#input2').value;
console.log(input1, input2);

And jQuery:

var input1 = $('#input1').val(),
    input2 = $('#input2').val();
console.log(input1, input2);

JS Perf.

References:

You are reading the results upside down if i am not mistaking. Native DOM is the slowest and More DOM is the fastest. — Ruben-J, Apr 24 '13 at 11:34
@Ruben-J: interestingly, I wasn't; on the first run the native DOM was the fastest (before adding the d.qS() approach). Weird, will clear the cache and see what happens... — David Thomas, Apr 24 '13 at 11:36
Me too! I...can't repeat my earlier comment, so I'm assuming there was something weird happening. Anyway, running it three subsequent times (with cleared and un-cleared cache) seems to discredit my earlier standpoint. Answer edited and corrected (very weird, I guess I must have been mistaken, of course). — David Thomas, Apr 24 '13 at 11:41
You should probably mention that `querySelector` is not avail in many older browser versions, f.ex IE7. — David Hellsing, Apr 24 '13 at 11:43
Then again, on mobile chrome the native is only 8% slower than getElementById approach and jQuery is slowest. — Ja͢ck, Apr 24 '13 at 13:00

score 0 · Answer 7 · answered Apr 24 '13 at 11:54

0

There is no reason to use jQuery over javascript in this case.

answered Apr 24 '13 at 11:54

Rob

14,746
28
47
65

Better practice Jquery vs Document.formname.formelement.value

7 Answers7