JavaScript: в чем разница между "документом" и "HTML"

Пример:

$(document).click(function() { blah });   
// and
$('html').click(function() { blah });
Источник

4 ответа

Решение

Я отвечу на вопрос в нескольких частях.

В JavaScript (не только в jQuery, но и во всем JavaScript) ключевое слово document является дескриптором объекта, который содержит HTMLDocument. Вы можете использовать этот дескриптор в следующих сценариях...

// Get the current web address
alert(document.location.href);

Когда вы передаете документ в jQuery, он анализирует документ в объект jQuery.

Когда вы передаете селектор "html" в jQuery, он использует эту строку для поиска любых элементов в объектной модели документа, которые соответствуют селектору (во всех случаях будет один элемент html).

В действительности вы не заметите разницу в поведении между ними:

$(document).click(function() { alert('blah'); });   
$('html').click(function() { alert('blah'); });
$('body').click(function() { alert('blah'); });

Но техническое отличие состоит в том, что документ - это объект, а "html" - это строка, которая используется для поиска элемента. И объект, и любые соответствующие элементы преобразуются в объекты jQuery.

Поскольку все они добавляют обработчик событий клика в "видимую" часть страницы, которая является единственной частью страницы, на которую пользователь может реально щелкнуть.

Источник

Они выбирают одно и то же. Единственная разница в том, как движок jQuery находит это. Первый случай является особым случаем в функции инициализации jQuery, второй - с использованием getElementsByTagName

Источник

Попробуйте вывести innerHTML обоих, каков результат? я считаю (но не проверял), что

  • document действительно полный документ, в том числе <html> и все элементы в нем
  • html ссылается на <html>-тег, так что будет только <head> а также <body> в вашем выводе, а не <html>-тег себя

но: для вашего кода (добавление обработчика кликов) не будет никакой разницы, потому что нажатие на документ всегда будет кликом по <html> (пока ваш сайт действителен и имеет <html>-тег)

Источник

Я заметил несколько отличий:

  1. document это DOM Element which wraps the HTML - DOM Elementв то время как html это HTML DOM element,
  2. document включает в себя первую строку документа - ту, которая определяет doctype, Например <!doctype html> (for HTML 5)
  3. HTML может иметь class, id and other attributes в то время как document не имеет (и не может иметь) эти attributes, Пытаться $(document).addClass('test') v/s $('html').addClass('test'); и заметить разницу на elements tab on developer console,

Удачи...

Источник
Другие вопросы по тегам