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 або null, тоді як другий завжди повертає об'єкт 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

Ні, насправді такий же результат був би:

$('#contents')[0] 

jQuery не знає, скільки результатів буде повернуто з запиту. Що ви отримуєте назад - це спеціальний об’єкт jQuery, який представляє собою сукупність усіх елементів управління, які відповідають запиту.

Частина того, що робить jQuery настільки зручним, полягає в тому, що методи MOST, що викликаються на цьому об'єкті, схожі на те, що вони призначені для одного елемента керування, насправді знаходяться в циклі, що викликається всіма членами в колекції

Коли ви використовуєте синтаксис [0], ви берете перший елемент із внутрішньої колекції. У цей момент ви отримуєте об’єкт DOM

У випадку, якщо хтось інший потрапить на це ... Ось ще одна різниця:

Якщо ідентифікатор містить символи, які не підтримуються стандартом HTML (див. Питання ТАК тут ), то 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 ). Внутрішньо 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] );

Ще одна відмінність: 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 із вказаним значенням, і повертає нуль, якщо немає елементів із зазначеним ідентифікатором. Ідентифікатор повинен бути унікальним на сторінці.

Jquery $ ()

Виклик jQuery () або $ () за допомогою селектора ідентифікатора як його аргументу поверне об’єкт jQuery, що містить колекцію або нуля, або одного елемента DOM. Кожне значення id повинно використовуватися лише один раз у документі. Якщо більше одного елемента було призначено однаковий ідентифікатор, запити, які використовують цей ідентифікатор, виберуть лише перший відповідний елемент у 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