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

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

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

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

или

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

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

Answer 4

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

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

Answer 10

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