Когда вызывается такой обработчик событий DOM0, браузер гарантирует, что для this
будет установлена ссылка на элемент, на котором включен обработчик. Так что в вашем коде this
- это экземпляр элемента h1
. this.innerHTML = 'Ooops!'
устанавливает содержимое элемента в "Ooops!"
В приведенном выше коде, что в мире является этим объектом?
Это в DOM.
Это ссылка h1
, но если я напишу h1.innerHMTL
, это не сработает.
Это потому, что у вас нет переменной h1
. См. Мое примечание выше о том, почему this
работает в такой ситуации. (Там также есть тип innerHTML
.)
Или, если я напишу document.getElementByTagName("h1").innerHTML = 'Oops!'
, это не сработает.
В DOM нет метода getElementByTagName
. Существует getElementsByTagName
(обратите внимание на множественное число), которое возвращает список всех h1
s в документе.
Вы можете использовать querySelector
, который возвращает первое совпадение для любого селектора CSS в документе:
document.querySelector("h1").innerHTML = "Ooops!";
Подробнее о различных доступных вам методах DOM вы можете найти в документации DOM MDN для подробностей.