Сравнение document.getElementById и jQuery $(): что выбрать?

Не совсем так!!

document.getElementById('contents'); // возвращает объект HTML DOM

var contents = $('#contents');  // возвращает объект jQuery

В jQuery, чтобы получить тот же результат, что и document.getElementById, вы можете обратиться к объекту jQuery и получить первый элемент в этом объекте (не забудьте, что объекты JavaScript ведут себя подобно ассоциативным массивам).

var contents = $('#contents')[0]; // возвращает объект HTML DOM

Нет.

Вызов document.getElementById('id') вернёт «сырое» DOM-объект.

Вызов $('#id') вернёт jQuery-объект, который оборачивает DOM-объект и предоставляет методы jQuery.

Таким образом, вы можете вызывать только методы jQuery, такие как css() или animate(), на результате вызова $().

Вы также можете написать $(document.getElementById('id')), что вернёт jQuery-объект и эквивалентно $('#id').

Вы можете получить исходный DOM-объект из jQuery-объекта, написав $('#id')[0].

Примечание о разнице в скорости

Прикрепите следующий фрагмент к вызову onclick:

function myfunc()
{
    var timer = new Date();
    
    for(var i = 0; i < 10000; i++)
    {
        //document.getElementById('myID');
        $('#myID')[0];
    }

    console.log('timer: ' + (new Date() - timer));
}

Попробуйте поочередно закомментировать один из вызовов. В моих тестах:

document.getElementById в среднем работал за 35мс (вариации от 25мс до 52мс за примерно 15 запусков).

С другой стороны:

jQuery в среднем работал за 200мс (в диапазоне от 181мс до 222мс на тех же 15 запусках).

Из этого простого теста видно, что jQuery работает примерно в 6 раз медленнее.

Конечно, это было проведено на 10000 итерациях, поэтому в более простых случаях я, вероятно, предпочёл бы jQuery за его удобство использования и множество дополнительных возможностей, таких как .animate и .fadeTo. Но да, с технической точки зрения, getElementById оказался значительно быстрее.

Почти, но не совсем то же самое. Они получают один и тот же элемент, но версия jQuery обернута в объект jQuery.

Эквивалентом будет следующий код:

var contents = $('#contents').get(0);

или так:

var contents = $('#contents')[0];

Оба примера извлекут элемент из объекта jQuery.

Нет, на самом деле тот же результат будет:

$('#contents')[0]

jQuery не знает, сколько элементов будет возвращено по запросу. То, что вы получаете, — это специальный объект jQuery, который представляет собой коллекцию всех элементов, соответствующих запросу.

Часть того, что делает jQuery таким удобным, заключается в том, что БОЛЬШИНСТВО методов, вызываемых на этом объекте и которые выглядят так, будто они предназначены для одного элемента, на самом деле выполняются в цикле для всех элементов в коллекции.

Когда вы используете синтаксис [0], вы берете первый элемент из внутренней коллекции. На этом этапе вы получаете DOM-объект.