document.getElementById vs jQuery $()

Question

Это:

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

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

var contents = $('#contents');

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

Answer 1

Не совсем!!

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

Answer 2

Нет.

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

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

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

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

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

Answer 3

Обратите внимание на разницу в скорости. Прикрепите следующий фрагмент к вызову 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 это немного быстрее.

Answer 4

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

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

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

или это

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

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

Answer 5

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

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

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

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

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

Answer 6

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

$('#contents')[0] 

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

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

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

Answer 7

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

Если идентификатор содержит символы, которые не поддерживаются стандартом 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']);

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

document.getElementById()

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

Jquery $()

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

Answer 12

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

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

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

Answer 13

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

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

Answer 14

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