在JavaScript中，我不了解此关键字

Question

在下面的代码中，此对象到底是什么？ 它引用的是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 --> 

Answer 1

当调用类似DOM0的事件处理程序时，浏览器确保将this设置为对该处理程序所在元素的引用。 因此，在您的代码中， this是h1元素实例。 this.innerHTML = 'Ooops!' 将元素的内容设置为“糟糕！”

在上面的代码中，该对象到底是什么？

在DOM中。

它引用了h1 ，但是如果我写h1.innerHMTL它将无法正常工作。

那是因为您没有h1变量。 请参阅上面的注释，以了解在这种情况下为什么this有效。 （那里的innerHTML也有一种类型。）

或者，如果我编写document.getElementByTagName("h1").innerHTML = 'Oops!' 它不起作用。

DOM中没有getElementByTagName方法。 有一个getElementsByTagName （注意复数），它返回文档中所有h1的列表 。

您可以使用querySelector ，它返回文档中任何CSS选择器的第一个匹配项：

document.querySelector("h1").innerHTML = "Ooops!";

有关可用的各种DOM方法的更多信息，请参见MDN的DOM文档 。