What to use: jQuery methods or native JavaScript methods?

Question

Take for example the following snippet:

$('li').each(function(idx, domEl) { console.log('----------------------------------------'); console.log('idx | ' + idx ); console.log('domEl === this | ' + (domEl === this) ); // true console.log('domEl | ' + domEl ); // [object HTMLLIElement] console.log('$(domEl).text() | ' + $(domEl).text() ); console.log('domEl.textContent | ' + domEl.textContent); if (idx === 5) { return false; // to exit the loop } });

 <script src="//code.jquery.com/jquery-3.0.0.min.js"></script> <ol> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> <li>Fifth</li> <li>Sixth</li> <li>Seventh</li> <li>Eighth</li> <li>Ninth</li> <li>Tenth</li> </ol>

Fiddle

In this case, are there any benefits from using this:

 $(domEl).text()

in comparison with this:

 domEl.textContent

And which of these two options is the best practice?

If you use jquery in a project, is there a reason not to use it entirely?
anyway, the library is already loaded, otherwise it makes sense to load it if you can only use native tools?
@ Jean-Claude, yes, I agree with this, the question here is rather whether it is worth mixing native methods with jQuery methods or choosing one style and using it only ... I think the answer I mentioned answers my question.

Grundy grundy 58.7k 7 golden marks 54 silver marks 95 bronze marks · Accepted Answer · 2016-09-11T08:33:43

Synthetic tests are synthetic.

If you look at what exactly happens in the text method

 getText = Sizzle.getText = function( elem ) { var node, ret = "", i = 0, nodeType = elem.nodeType; if ( !nodeType ) { // If no nodeType, this is expected to be an array while ( (node = elem[i++]) ) { // Do not traverse comment nodes ret += getText( node ); } } else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) { // Use textContent for elements // innerText usage removed for consistency of new lines (jQuery #11153) if ( typeof elem.textContent === "string" ) { return elem.textContent; } else { // Traverse its children for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) { ret += getText( elem ); } } } else if ( nodeType === 3 || nodeType === 4 ) { return elem.nodeValue; } // Do not include comment or processing instruction nodes return ret; };

You may notice that for the example from the question will be called - the same textContent .

It can also be noted that the text of the function is unified, so that it can be called with different types of arguments, starting from an array (collection) and ending with different types of nodes: elements, text nodes, etc.

Thus, if at the time of writing the script there is an exact certainty of what type of elements you need to take the text - you can use the necessary property directly, for the code from the question - use textContent on the html element itself. This will avoid the cost of calling the jQuery constructor and the corresponding checks inside the function itself.

If it is not known what the method will be used for, then it is better to use the jQuery method.

Answer 2 · 2016-09-11T08:38:23

The .text() method in jQuery allows you to get text not only from a single node, but, for example, from an array of nodes selected by a selector. In some cases, jQuery organizes support for older browsers, in which a similar vanilla method was not yet supported.

Here, for example, the sources of the .text() method:

 function (elem) { var node, ret = "", i = 0, nodeType = elem.nodeType; if (!nodeType) { // If no nodeType, this is expected to be an array while ((node = elem[i++])) { // Do not traverse comment nodes ret += getText(node); } } else if (nodeType === 1 || nodeType === 9 || nodeType === 11) { // Use textContent for elements // innerText usage removed for consistency of new lines (jQuery #11153) if (typeof elem.textContent === "string") { return elem.textContent; } else { // Traverse its children for (elem = elem.firstChild; elem; elem = elem.nextSibling) { ret += getText(elem); } } } else if (nodeType === 3 || nodeType === 4) { return elem.nodeValue; } // Do not include comment or processing instruction nodes return ret; }

Support array of nodes, correct processing of nodes with children nodes instead of text.

The sources of jQuery methods can be viewed here .

There is also a youmightnotneedjquery.com resource that shows how to use the vanilla method to replace the required jQuery method. According to him, .text() can be replaced by .textContent , but support will only be IE9 +. Perhaps the jQuery method in this regard provides support for older browsers.

Perhaps the jQuery method in this regard provides support for older browsers.

What to use: jQuery methods or native JavaScript methods?

2 answers 2

More articles: