DOM Objects Worksheet

Question 1

In order to use the document.getElementById() method to 'get a handle' on an element, what attribute must that element have?

The element must have the id attribute.
For example: id="", which is located within the element's opening tag.

Question 2

When you invoke document.getElementById(), you must pass in a string parameter. What does the parameter represent?

The parameter represents the value of the id attribute of the element that is being targeted.

If we were targeting an H1 element with an attribute id="main-header", then you would use "main-header" as the string parameter.
For example: let h1 = document.getElementbyID("main-header");

Question 3

What does the document.getElementById() method return?

This returns any HTML element object from the DOM, as long as the HTML element has an id attribute.

When using console.log(h1);, the console log will show the element view of the object.
When using console.dir(h1);, the console log will allow you to drill down into the properties of the object.

Question 4

What object is at the top of the DOM? In other words, what DOM object contains all other DOM objects?

The window object is at the top of the DOM. This represents the browser window.

Coding Problems

You'll use the following elements to complete the coding problems:

Problem 1

Problem 2
A bald eagle

Problem 3

This is myDiv