Какая разница?

Недавно я прошел телефонное собеседование, и мне задали несколько вопросов, на которые я мог бы ответить лучше. Цель этой серии сообщений в блоге - помочь мне запомнить эти концепции, поэтому в следующий раз у меня будет лучший ответ. Если другие сочтут эти сообщения полезными, тем лучше.

Двумя распространенными методами выбора элементов на веб-странице, чтобы ими можно было управлять в JavaScript, являются document.getElementById() и селектор jQuery. Цель этого поста - изучить результат использования обоих этих методов и узнать, чем они отличаются.

Настраивать

Настройка для этого теста представляет собой HTML-документ, в теле которого содержится следующая информация:

<div id=”main”></div>

Я собираюсь использовать как document.getElementById(‘main’), так и $(‘#main’), чтобы выбрать этот элемент, чтобы я мог исследовать объект, создаваемый каждым методом.

console.dir ()

Я буду использовать console.dir() для отображения этих объектов в консоли JavaScript. console.dir() отображает интерактивный список свойств указанного объекта JavaScript. Для получения дополнительной информации см. Эту статью на MDN.

document.getElementById (‘main’)

Когда я запускаю следующий код:

const element = document.getElementById(‘main’);
console.dir(element);

И посмотрите в консоль, я вижу единственный объект с именем «div # main». Когда я щелкаю треугольник слева от этого объекта, отображается список свойств и методов. Внизу списка я вижу «__proto__: HTMLDivElement», также с треугольником слева. Нажимая на этот треугольник, я вижу список свойств и методов, связанных с прототипом элемента Div. Я могу продолжить просмотр списка прототипов и всех связанных свойств и методов, пока не дойду до базового прототипа Object. Я вижу здесь объект DOM для выбранного мной div.

$(‘#main’)

Затем я запускаю следующий код:

const $element = $(‘#main’);
console.dir($element);

На этот раз я вижу объект с меткой w.fn.init(1). Когда я щелкаю треугольник слева, отображаются три вещи: объект DOM, который выглядит так, как будто он находится в массиве с одним элементом (0: div#main), свойство длины и прототип объекта jQuery (__proto__: Object(0)).

Когда я щелкаю треугольник слева от объекта DOM, он выглядит так же, как объект DOM, который я видел ранее. Поскольку объект jQuery представляет собой объект, подобный массиву, я могу выбрать только объект DOM в объекте jQuery следующим образом:

const $element = $(‘#main’)[0];

Когда я сравнил этот объект DOM с более ранним объектом DOM:

console.log(element === $element ? ‘true’ : ‘false’);
// returns ‘true’

Я вижу, что это фактически один и тот же объект.

Когда я щелкаю стрелку слева от прототипа jQuery, я вижу все методы, которые предоставляет jQuery, которые можно применить к этому объекту DOM.

Заключение

Объекты, возвращаемые document.getElementById() и селектором jQuery, различны. document.getElementById() возвращает объект DOM со всеми свойствами и методами, связанными с объектом DOM. Сюда входят все свойства и методы, связанные с прототипом объекта DOM и прототипом объекта DOM, на всем протяжении цепочки прототипов, пока мы не достигнем базового объекта.

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

Изучая эту статью, я обнаружил, что эта статья с веб-сайта jQuery и это видео очень информативны.

Другие статьи из этой серии:

Связанные истории: