document.getElementById vs 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.

Замечание о разнице в скорости. Прикрепите следующий снайпер к вызову 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 мс (колеблется от 25ms до 52ms на 15 runs)

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

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

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

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

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

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

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

Является более эквивариантным, однако, если ни один элемент с идентификатором contents не будет сопоставлен, document.getElementById('contents') вернет значение null, но $('#contents').get(0) вернет undefined.

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

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

$('#contents')[0] 

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

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

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

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

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

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

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

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

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

не было.

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

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

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

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

var contents = $('#contents');

Отрывки кода не совпадают. сначала возвращает объект Element (источник). Второй, эквивалент jQuery, вернет объект jQuery, содержащий набор нулевого или одного элемента DOM. (документация jQuery). Внутри jQuery использует document.getElementById() для повышения эффективности.

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

При проверке проекта github для jQuery я нашел следующие фрагменты строки, которые, по-видимому, используют коды document.getElementById(https://github.com/jquery/jquery/blob/master/src/core/init.js строка 68 и далее )

// HANDLE: $(#id)
} else {
    elem = document.getElementById( match[2] );

Еще одно отличие: 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