Это:
var contents = document.getElementById('contents');
Так же, как это:
var contents = $('#contents');
Учитывая, что 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.getElementBy
, не работает правильно в <IE8. Он также получает элементы, name
поэтому теоретически можно утверждать, что document.getElementById
он не только вводит в заблуждение, но и может возвращать неверные значения. Я думаю, что @John это новое, но я подумал, что не мешало бы его добавить.
$('#'+id)[0]
не равно, document.getElementById(id)
потому что id
может содержать символы, которые обрабатываются специально в jQuery!
jquery equivalent of document.getelementbyid
и первый результат этого поста. благодарю вас!!!
$('#contents')[0].id
возвращает имя
Нет.
Вызов document.getElementById('id')
вернет необработанный объект DOM.
Вызов $('#id')
вернет объект jQuery, который упаковывает объект DOM и предоставляет методы jQuery.
Таким образом, вы можете вызывать только методы jQuery, такие как css()
или animate()
при $()
вызове.
Вы также можете написать $(document.getElementById('id'))
, что будет возвращать объект jQuery и эквивалентно $('#id')
.
Вы можете получить базовый объект DOM из объекта jQuery, написав $('#id')[0]
.
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.
Близко, но не то же самое. Они получают один и тот же элемент, но версия 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
это немного быстрее .
$('#someID')
с document.getElementById("someID")
? Я работаю над чем-то, что я широко использовал, $('#someID')
и моя страница работает медленно для ввода большого файла. Пожалуйста, предложите мне, каким должен быть мой ход.
var $myId = $('#myId');
и повторно используйте сохраненную переменную $myId
. Поиск по идентификатору, как правило, довольно быстрый процесс, поэтому, если страница работает медленно, возможно, есть другая причина.
Нет. Первый возвращает элемент 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