document.getElementById vs jQuery $ ()

620

Это:

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

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

var contents = $('#contents');

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

Филипп Сенн
источник
10
В дополнение к вопросам, поднятым в ответах, версия jQuery - приложение. В 100 раз медленнее.
8
это где-то доказано?
FranBran
12
@torazaburo На самом деле, версия jQuery даже не в 3 раза медленнее (по крайней мере, в последней версии Chrome). См .: jsperf.com/getelementbyid-vs-jquery-id/44
Михал Перлаковский,
2
@ MichałPerłakowski в этой ссылке версия jquery в 10 раз медленнее. 26 млн. Против 2,4 млн.
Клаудиу Крянгэ
1
Правильная обновленная ссылка для JSPerf: jsperf.com/getelementbyid-vs-jquery-id В моем случае (FF 58) это в 1000 раз медленнее. В любом случае, jQuery по-прежнему выполняет 2,5 миллиона операций в секунду. В общем, это не проблема, и ее нельзя сравнивать с точки зрения функциональности.
Диего Янчич

Ответы:

1017

Не совсем!!

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
Джон Хартсок
источник
24
Для тех, кто заинтересован document.getElementBy, не работает правильно в <IE8. Он также получает элементы, nameпоэтому теоретически можно утверждать, что document.getElementByIdон не только вводит в заблуждение, но и может возвращать неверные значения. Я думаю, что @John это новое, но я подумал, что не мешало бы его добавить.
Lime
14
Будьте осторожны, если ваш идентификатор не является фиксированным. $('#'+id)[0]не равно, document.getElementById(id)потому что idможет содержать символы, которые обрабатываются специально в jQuery!
Якоб
1
Это было очень полезно - никогда не знал этого! Я уверен, что на самом деле я использовал его раньше, но это то, что сбивает меня с толку. Эй, ты чему-то учишься каждый день! Спасибо!
jedd.ahyoung
3
гугл jquery equivalent of document.getelementbyidи первый результат этого поста. благодарю вас!!!
ajakblackgoat
$('#contents')[0].idвозвращает имя
Омар
139

Нет.

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

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

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

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

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

SLaks
источник
4
Вы случайно не знаете, какой из них быстрее - $ (document.getElementById ('element')) против $ ('# element')?
Иван Ивкович
10
@ IvanIvković: Первый из них быстрее, так как он не включает разбор строк.
Слакс
1
@SLaks В чем основное различие между необработанным объектом DOM и объектом jQuery? Просто, используя объект jQuery, мы можем применять методы jQuery?
Roxy'Pro
@ Roxy'Pro: Это разные объекты. Объекты jQuery обертывают объекты DOM. Смотрите документацию.
Утром
Этот документ JavaScript DOM Objects против jQuery Objects выглядит полезным. In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements.
user3454439
31

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

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

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

или это

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

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

RightSaidFred
источник
29

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

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

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

nurdyguy
источник
Спасибо за этот ответ. Я хотел спросить, должен ли я заменить все $('#someID') с document.getElementById("someID") ? Я работаю над чем-то, что я широко использовал, $('#someID')и моя страница работает медленно для ввода большого файла. Пожалуйста, предложите мне, каким должен быть мой ход.
Мажар МИК
Если вы повторно используете один и тот же файл в одной и той же области, сохраните его, как var $myId = $('#myId');и повторно используйте сохраненную переменную $myId. Поиск по идентификатору, как правило, довольно быстрый процесс, поэтому, если страница работает медленно, возможно, есть другая причина.
nurdyguy
Спасибо @nurdyguy. Это было полезно. Я постараюсь реализовать это.
Мажар МИК
17

Нет. Первый возвращает элемент DOM, или ноль, тогда как второй всегда возвращает объект 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

Matt
источник
15

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

$('#contents')[0] 

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

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

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

Андрей
источник
10

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

Если идентификатор содержит символы, которые не поддерживаются стандартом HTML (см. Здесь вопрос SO ), то 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']);
user1435666
источник
5

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

Kobby
источник
5

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

var contents = $('#contents');

Фрагменты кода не совпадают. первый возвращает Elementобъект ( источник ). Второй, эквивалентный jQuery, вернет объект jQuery, содержащий коллекцию из нуля или одного элемента DOM. ( документация jQuery ). Внутренне использует JQuerydocument.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] );
Nipuna
источник
4

Еще одно отличие: 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 может помочь вам там.

Стив Бэнкс
источник
2

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

document.getElementById ()

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

Jquery $ ()

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

Хади Мир
источник
1

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

Gonki
источник
1

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

У меня есть 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

Сегодня все ответы устарели. По состоянию на 2019 год вы можете напрямую получить доступ к файлам с идентификатором в javascript, просто попробуйте

<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>

Демо онлайн! - https://codepen.io/frank-dspeed/pen/mdywbre

откровенная-dspeed
источник