it-roy-ru.com

document.getElementById vs jQuery $ ()

Это:

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

Так же, как это:

var contents = $('#contents');

Учитывая, что jQuery загружен?

556
Phillip Senn

Не совсем!!

document.getElementById('contents'); //returns a HTML DOM Object

var contents = $('#contents');  //returns a jQuery Object

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

var contents = $('#contents')[0]; //returns a HTML DOM Object
912
John Hartsock

Нет.

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

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

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

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

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

126
SLaks

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

Эквивалент будет

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

или это

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

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

28
RightSaidFred

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

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

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

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

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

22
nurdyguy

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

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

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

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

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

16
Matt

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

$('#contents')[0] 

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

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

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

14
Andrey

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

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

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

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

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

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

не.

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

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

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

5
Kobby

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] );
5
Nipuna

Еще одно отличие: getElementById возвращает совпадение first, а $('#...') возвращает коллекцию совпадений - да, один и тот же идентификатор может повторяться в 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 может помочь вам там.

4
steve banks

jQuery построен на JavaScript. Это означает, что это просто JavaScript в любом случае.

document.getElementById ()

Метод document.getElementById () возвращает элемент, имеющий атрибут ID с указанным значением, и возвращает значение null, если не существует элементов с указанным идентификатором. Идентификатор должен быть уникальным на странице.

Jquery $ ()

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

2
Hadi Mir

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

1
Gonki

Все ответы выше верны. Если вы хотите увидеть его в действии, не забывайте, что у вас есть консоль в браузере, где вы можете увидеть реальный результат кристально ясно:

У меня есть HTML:

<div id="contents"></div>

Перейдите в консоль (cntrl+shift+c) и используйте эти команды, чтобы ясно увидеть ваш результат

document.getElementById('contents')
>>> div#contents

$('#contents')
>>> [div#contents,
 context: document,
 selector: "#contents",
 jquery: "1.10.1",
 constructor: function,
 init: function …]

Как мы видим, в первом случае мы получили сам тег (то есть, строго говоря, объект HTMLDivElement). В последнем случае мы имеем не простой объект, а массив объектов. И, как уже упоминалось в других ответах выше, вы можете использовать следующую команду:

$('#contents')[0]
>>> div#contents
1
Mazhar MIK