В чем разница между этими двумя способами получения объекта canvas

Question

canvas = $('#canvasID');

canvas = document.getElementById('canvasID');

Какая разница? почему я не могу использовать canvas.offset(), когда получаю объект canvas вторым способом?

Answer 1

$('#canvasID') использует jQuery для извлечения элемента.

document.getElementById('canvasID'); использует собственную реализацию браузера для извлечения элемента по его идентификатору.

Реализация $("#canvasID") отличается в разных браузерах, но я подозреваю, что на самом деле он использует document.getElementByID() под капотом во всех современных браузерах.

Причина, по которой вы не можете использовать offset со вторым методом, заключается в том, что это метод объекта jQueryкоторый возвращается из $('#canvasID');).

Answer 2

$('#canvasID') использует jQuery

document.getElementByID('canvasID') использует собственную реализацию браузера, в основном сырой JavaScript.

Вы не можете использовать метод .offset(), потому что пытаетесь использовать его нане объект JQuery.

Answer 3

при первом способе вы получаете jquery-объект, представляющий этот элемент - и этот jquery-объект имеет offset() -метод.
с getElementById() вы получаете «простой» javascrip-объект, с которым не знает этот метод.

Answer 4

offset() - это метод jQuery, который можно применять к объектам jQuery, возвращаемым функцией $ (или jQuery).Чтобы получить необработанный объект холста, получите доступ к элементам этого объекта. $('#canvasID')[0].

document.getElementById возвращает необработанный объект.Чтобы получить объект jQuery из необработанного объекта HTML, вызовите с ним $.

В итоге:

var jquery_canvas = $('#canvas');
var raw_canvas = jquery_canvas[0];
var jquery_canvas_again = $(raw_canvas);

var context = raw_canvas.getContext('2d');
// NOT: jquery_canvas.getContext(), as getContext is only defined on raw object

var offset = raw_canvas.offset();
// NOT: raw_canvas.offset(), as offset is only defined on a jQuery object

Answer 5

Метод .offset() является методом jQuery.Функция $() возвращает массив обернутых объектов jQuery, соответствующих селектору.Таким образом, вы можете вызывать методы jQuery для них.document.getElementById('canvasID'); возвращает собственный элемент DOM, для которого такой метод не определен.