The DOM is a W3C specification for accessing the content of HTML documents. To manipulate something like an image or a header we need to have a way to refer to the element (an object reference), so we can access its properties like styles. getElementById is a method - basically a function - that returns an object reference to the element whose id is specified. We can then use the object reference to set the element's properties directly.
To make the process easier to see you can replace the line:
myHeader = document.getElementById(id);
In the first version, we use the object reference immediately to set a property of the element to which it refers, and we don't bother to save it in a variable. In the second version the object reference is stored in the variable myHeader and then we can use that as if it were the object (element) itself, so if we wanted to set multiple properties we could store the return value of getElementById and we would basically have a "handle" for the element in question that we could use to access and manipulate it.
getElementById is only one way of doing this. For instance, elements can be referred to by name instead of id. If we had a form named "myForm" that contained a text field named "myText" we could clear the text inside the field by using:
or this way:
tf = document.myForm.myText;
Here, the text field is an object contained within the form object which is in turn contained in the document object, so I can access it through the DOM by referring to it as document.myForm.myText, and value is a property of the text field, so once I have a way of referring to the text field element I can use it to set the value property directly or store the reference in a variable and use it later (or even pass it to another function and work on it somewhere else).