I don't understand this keyword in this context in JavaScript

Question

In the code below, what in the world is the this object? It is referencing h1, but if I write h1.innerHMTL it doesn't work.
Or if I write document.getElementByTagName("h1").innerHTML = 'Oops!'

it doesn't work either.

What is "this" referencing, can someone write it out. I'm just confused.

<!-- 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

When a DOM0 event handler like that is called, the browser ensures that this is set to a reference to the element the handler is on. So in your code there, this is the h1 element instance. this.innerHTML = 'Ooops!' sets the content of the element to the "Ooops!"

In the code above, what in the world is the this object?

It's in the DOM.

It is referencing h1, but if I write h1.innerHMTL it doesn't work.

That's because you don't have an h1 variable. See my note above about why this works in that situation. (There's also a type in innerHTML there.)

Or if I write document.getElementByTagName("h1").innerHTML = 'Oops!' it doesn't work.

There is no getElementByTagName method in the DOM. There's getElementsByTagName (note the plural), which returns a list of all h1s in the document.

You could use querySelector, which returns the first match for any CSS selector in the document:

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

More about the various DOM methods available to you can be found in MDN's DOM documentation for details.