This is the header

You will use the javascript file to continually change the size of the header, but first we need to learn how to use JavaScript to actually grab the HTML objects from the DOM.

Here are some important document attributes:

• document.URL -- This is the actual URL of the website
• document.body -- This is everything inside of the body
• document.head -- This is everything in the head of the page
• documnet.links -- These are all the links on the page

Then we also have methods we can use to grab HTML elements:

• document.getElementById() -- Returns the element with the id
• document.getElementsByClassName() -- Returns list of all elements belonging to a class
• document.getElementsByTagName() -- Returns list of all elements with the tag
• document.querySelector() -- Returns the first object matching the CSS style selector
• document.querySelectorAll() -- Returns all objects matchin the CSS style selector

The first three of these are pretty self explanatory. The querySelector() can accept CSS style selector, so you can use # or . if you want ids or classes. Basically a more generalized method where you can type any CSS style. The difference between querySelector() and querySelectorAll() is that querySelectorAll() will return a list of all matches, querySelector() just returns the first match.