Document Object Model (DOM)

Question 1

Why do we log things to the console?

Answer 1

• To verify and check code.
• To use for bug checking.

Question 2

What is a “model”?

Answer 2

• A representation of something, but not the real thing.

Question 3

Which “document” is being referred to in the phrase Document Object Model?

Answer 3

• The html document.

Question 4

Which “objects” are being referred to in the phrase Document Object Model?

Answer 4

• The data type objects within the JavaScript language.

Question 5

What is a DOM Tree?

Answer 5

• A model of a web page.
• A model of a portion of a webpage.
• (An element plus all of its content and configurations).

Question 6

Give two examples of document methods that retrieve a single element from the DOM.

Answer 6

• querySelector(). (Always just use this for selecting a single element query).
• getElementByID(). (Old, not really needed anymore).

Question 7

Give one example of a document method that retrieves multiple elements from the DOM at once.

Answer 7

• querySelectorAll(). (Always just use this for selecting multiple element queries.

Question 8

Why might you want to assign the return value of a DOM query to a variable?

Answer 8

• To reuse it later.
• Cut down on amount of code.
• Cleans up code.

Question 9

What console method allows you to inspect the properties of a DOM query to a variable?

Answer 9

• console.dir().

Question 10

Why would a

 tag need to be placed at the bottom of the HTML content, instead of at the top?

Answer 10

• Gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and can speed up website response time.

Question 11

What does document.querySelector() take as its argument and what does it return?

Answer 11

• It takes a string (a CSS selector) as its argument, and it returns THE FIRST element that matches the CSS selector (which is an object).

Question 12

What does document.querySelectorAll() take as its argument and what does it return?

Answer 12

• It takes a string as its argument, and returns a NodeList.

Question 13

What is the purpose of events and event handling?

Answer 13

• Interactivity. The developer can prepare for actions taken by users and create a response.

Question 14

Are all possible parameters required to use a JavaScript method or function?

Answer 14

• No, not necessary at all times.

Question 15

What method of element objects lets you set up a function to be called when a specific type of event occurs?

Answer 15

• add.eventListener.

Question 16

What is a callback function?

Answer 16

• Taking a function and passing it around.
• Ex. sharing a recipe with a friend.

Question 17

What object is passed into an event listener callback when the event fires?

Answer 17

• Information about what happened with the event.

Question 18

What is the event.target? If you weren’t sure, how would you check? where could you get more info about it?

Answer 18

• The element that triggers the event.
• Console.log.
• MDN

Question 19

What is the difference between these two snippets of code?

Answer 19

element.addEventListener(‘click’, handleClick):
- This is passing a variable in as the function.

element.addEventListener(‘click’, handleClick()):
- This is calling the function inside the event listener method.
(DO NOT DO THIS)