我在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!'将元素的内容设置为"Ooops!"

在上面的代码中,这个对象在世界上是什么？

它在DOM中.

它是引用h1,但如果我写h1.innerHMTL它不起作用.

那是因为你没有h1变量.请参阅上面的说明,了解为何this在这种情况下有效.(那里也有一种类型innerHTML.)

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

getElementByTagNameDOM中没有方法.有getElementsByTagName(注意复数),它返回h1文档中所有s 的列表.

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

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

有关可用的各种DOM方法的更多信息,请参阅MDN的DOM文档以获取详细信息.