документ.getElementById против jQuery $()

нет.

вызов document.getElementById('id') вернет необработанный объект DOM.

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

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

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

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

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

эквивалентом будет это

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

или это

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

они вытащат элемент из объекта jQuery.

примечание о разнице в скорости. Прикрепите следующий snipet к вызову 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));
}

альтернативный комментируя один, а затем прокомментировать другой. В моих тестах,

документ.getElementbyId в среднем около 35ms (колебания от 25ms до 52ms о 15 runs)

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

jQuery в среднем около 200мс (начиная от 181ms до 222ms о 15 runs).

из этого простого теста вы можете видеть, что jQuery взял около 6 раз как долго.

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

нет. Первый возвращает элемент DOM или null, тогда как второй всегда возвращает объект jQuery. Объект jQuery будет пустым, если нет элемента с ID contents были обнаружены.

элемент DOM, возвращаемый document.getElementById('contents') позволяет делать такие вещи, как изменение .innerHTML (или .value) и т. д., Однако вам нужно будет использовать методы jQuery на объекте jQuery.

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

одно из преимуществ использования объекта jQuery заключается в том, что вы не получите ошибок, если элементы не были возвращены, так как объект всегда возвращается. Однако вы получите ошибки, если попытаетесь выполнить операции над null возвращено document.getElementById

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

$('#contents')[0] 

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

часть того, что делает jQuery настолько удобным, заключается в том, что большинство методов, вызываемых этим объектом, которые выглядят так, как будто они предназначены для одного элемента управления, на самом деле находятся в цикле, вызываемом всеми членами int he collection

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

на случай, если кто-то еще попадет в это... Вот еще одно отличие:

если идентификатор содержит символы, которые не поддерживаются стандартом HTML (см. SO question здесь) тогда jQuery может не найти его, даже если getElementById делает.

Это произошло со мной с идентификатором, содержащим символы " / "(например: id=" a/b/c"), используя Chrome:

var contents = document.getElementById('a/b/c');

смог найти свой элемент, но:

var contents = $('#a/b/c');

не.

Btw, простое исправление должен был переместить этот id в поле name. JQuery без проблем нашел элемент, используя:

var contents = $('.myclass[name='a/b/c']);

Как и большинство людей сказали, основное различие заключается в том, что он завернут в объект jQuery с вызовом jQuery против объекта raw DOM с использованием прямого JavaScript. Конечно, объект jQuery сможет выполнять с ним другие функции jQuery, но если вам просто нужно выполнять простые манипуляции DOM, такие как базовый стиль или базовая обработка событий, прямой метод JavaScript всегда немного быстрее, чем jQuery, так как вам не нужно загружать во внешнюю библиотеку кода, построенную на Яваскрипт. Это экономит дополнительный шаг.

var contents = document.getElementById('contents');

var contents = $('#contents');

фрагменты кода не совпадают. первый возвращает

еще одно отличие:getElementById возвращает первый матч, в то время как $('#...') возвращает коллекцию совпадений-да, тот же идентификатор может быть повторен в HTML-документе.

далее getElementId вызывается из документа, в то время как $('#...') можно вызвать из селектора. Итак, в приведенном ниже коде document.getElementById('content') вернет все тело, но $('form #content')[0] вернется внутри формы.

<body id="content">
   <h1>Header!</h1>
   <form>
      <div id="content"> My Form </div>
   </form>
</body>

может показаться странным использовать дубликаты идентификаторов, но если вы что-то используете как и Wordpress, шаблон или плагин может использовать тот же идентификатор, что и вы используете в контенте. Избирательность jQuery может помочь вам там.

Я разработал базу данных noSQL для хранения деревьев DOM в веб-браузерах, где ссылки на все элементы DOM на странице хранятся в коротком индексе. Таким образом, функция "getElementById()" не требуется для получения/изменения элемента. Когда элементы в дереве DOM создаются на странице, база данных назначает суррогатные первичные ключи каждому элементу. Это бесплатный инструмент http://js2dx.com