Я не понимаю это ключевое слово в этом контексте в JavaScript - PullRequest
0 голосов
/ 13 мая 2018

В приведенном ниже коде, что в мире является этот объект? Он ссылается на h1, но если я напишу h1.innerHMTL, это не сработает.
Или если я напишу document.getElementByTagName("h1").innerHTML = 'Oops!'

тоже не работает.

Что такое "эта" ссылка, может кто-нибудь выписать это. Я просто в замешательстве.

<!-- Works -->

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

<!-- Works -->

<h1 onclick="myFunctional()" id="demo">Click on this text!</h1>

<script>
function myFunctional() {
    document.getElementById("demo").innerHTML = "Ooops!";
}
</script>

<!-- Not working -->

<h1 onclick="myFunction()">Click on this text!</h1>

<script>
function myFunction() {
    document.querySelector("h1").innerHTML = "Ooops!";
}
</script>

<!-- Not Working -->

<h1 onclick="document.querySelector("h1").innerHTML = 'Ooops!';">Click on 
this text!</h1>

<!--Testing this one -->

<h1 onclick="document.querySelector('h1').innerHTML = 'Ooops!';">Click on 
this text!</h1>

<!--Your answer does not work -->

1 Ответ

0 голосов
/ 13 мая 2018

Когда вызывается такой обработчик событий 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 для подробностей.

...