Frage über document.getElementById

So ganz verstehe ich deine Frage nicht.

Aber mit

document.getElementById("myHeader");

Rufst du eine id auf die in deinen Code das <p> Element ist

<p id="myHeader"> Hello World </p>

Da die Id nur einmalig ist ( darf nur einmalig sein in einen Validen Code ). im document, wird durch diesen Code.

document.getElementById("myHeader").innerHTML="Have a nice Day";

Der Inhalt in den <p> Element geändert.

Wenn du deinen Code im Browser testest dann solte der Inhalt "Hello Word" sich ändern wenn man drauf klickt

Vielleicht wird der Sinn klarer, wenn man es mit document.querySelector() vergleicht: Hier kann man auch ein anderes Element als document verwenden und der Selector im Parameter wird dann nur innerhalb dieses Elementes gesucht. Z. B. so:

const thediv = document.getElementById("mydiv1");
const thespan = thediv.querySelector("#myspan1"); // das Element #myspan1 wird innerhalb von #mydiv1 gesucht

Bei getElementById geht das nicht, weil es eine ID immer nur einmal im Dokument gibt, aber ich vermute, dass man es aus Gründen der Einheitlichkeit so belassen hat, dass das document davor gestellt werden muss.

Der Grund ist schlicht und ergreifend, dass JavaScript ( auch wenn es eine Scriptsprache ist ) rein objektorientiert aufgebaut ist. Objekte haben Eigenschaften und Methoden. getElementById() ist eine Methode, des document-Objekt, deshalb muss man das mit angeben, wenn man es nutzen will.

EDIT: Ein Zusatz wäre da noch.

Ich nahm fälschlicher Weise auch mal an, dass querySelector() so wie in #3 gezeigt auf jedes Element angewendet werden kann. Ganz so ist es aber leider nicht, wie ich dann irgendwann feststellen musste. Denn auch bei Anwendung auf ein beliebiges Element, greift querySelector() auf das komplette DOM zu. Erst mit Verwendung des Pseudoselektor :scope erreicht man das gewünschte Verhalten:

var _someElement = document.querySelector( '#someDivElement' );
var _childElement = _someElement.querySelector( ':scope #someChild' );