Geek Answers Handbook

Best Practice Jquery vs Document.formname.formelement.value

quick question.

I am currently doing some js (pre / pre check), I have a question which line of code is better to use. I have always used this method.

document.formname.forminput.value

Instead

  $('formelement').val()

What would you recommend me to use, I believe the first method is better, since it does not rely on an external library to commit the function?

Thank you, Tony.

+4
source share
7 answers

According to JS Perf, the native DOM approach with document.querySelector() is the fastest, and you send the native DOM approach to your question the slowest. Presumably, “fast” correlates with efficiency, and it seems that then id selection (like using jQuery and document.querySelector() ) is the fastest selection method.

JS Perf is linked below and is 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);

Even 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 .

Literature:

+1
source

This is what works for you.

If you use only 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 method because it is cleaner, but you always know the simple JavaScript method if you use it.

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

+2
source

“Better” is hard to define. Faster is likely to be the first, although adding an identifier to the input field and calling $('#inputid') in jQuery may be faster. But the differences are so small that for any person it makes no sense to even consider micro-optimization of such a selector.

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

Needless to add, the jQuerys API, including val() , is more consistent between the various input elements and browsers, and can also be used as a setter.

+1
source

Both are good

if you use document.formname.forminput.value it means you are using simple javascript

But if you use $ ('formelement'). val (), it comes in jquery, which is one of the javascript frameworks. To use, you must download jquery.js and include it on your web page.

0
source

in fact there is no right answer for this ... the answer depends on the person using it.

the first one is plain javascript, so you said no external library files are needed.

whereas

the second uses jquery ....

I would go with the second reason for its short, readable and cleaner

0
source

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 will be

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

or

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

Be sure to check out the differences.

If you do not have jQuery on the page for other reasons than to get the values ​​of the form field, then, in my opinion, jQuery is not required. If, however, you are doing something a bit complex and cross-browser, like Ajax or event handling, go for jQuery for all your needs on the page

0
source

In this case, it makes no sense to use jQuery for javascript.

0
source

More articles:


All Articles