document.getElementById vs jQuery $ ()

Это:

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

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

var contents = $('#contents');

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

Не совсем!!

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

Нет.

Вызов 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 в среднем около 200 мс ( в пределах от 181msдо 222msот примерно 15 runs).

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

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

Нет. Первый возвращает элемент 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

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

$('#contents')[0] 

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

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

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

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

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

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

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

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

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

document.getElementById ()

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

Jquery $ ()

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

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

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

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

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

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

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