Что использовать: методы jQuery или нативные методы JavaScript?

Возьмём для примера следующий сниппет:
$('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 } });

1. First
2. Second
3. Third
4. Fourth
5. Fifth
6. Sixth
7. Seventh
8. Eighth
9. Ninth
10. Tenth

Фиддл

В данном случае, есть ли какие-то выгоды от использования этого:
$(domEl).text()
в сравнении с этим:
domEl.textContent
И что из этих двух вариантов является лучшей практикой?

Ответ

Синтетические тесты такие синтетические.
Если посмотреть, что именно происходит в методе text
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; };
можно заметить, что для примера из вопроса будет вызван - тот же самый textContent
Также можно отметить, что текст функции унифицирован, чтобы ее можно было вызывать с разными типами аргументов, начиная от массива(коллекции) и заканчивая различными типами узлов: элементы, текстовые узлы и т.д.
Таким образом, если в момент написания скрипта есть точная уверенность из какого типа элементов нужно будет брать текст - можно воспользоваться необходимым свойством напрямую, для кода из вопроса - использовать textContent на непосредственно html элементе. Это позволит избежать расходов на вызов конструктора jQuery и соответствующие проверки внутри самой функции.
Если же неизвестно для чего будет применяться метод - то лучше воспользоваться методом jQuery.