dom querying

Question 1

Why do we log things to the console?

Answer 1

to track and debug our code, check results along the way

Question 2

What is a “model”?

Answer 2

representation

Question 3

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

Answer 3

the current webpage

Question 4

What is the word “object” referring to in the phrase Document Object Model?

Answer 4

a JavaScript object

Question 5

What is a DOM Tree?

Answer 5

model of a web page made of objects

Question 6

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

Answer 6

getElementById(‘id’)

querySelector(‘selector’) (uses a CSS selector, returns first matching element)

Question 7

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

Answer 7

getElementsByClassName(‘class’)
getElementsByTagName(‘tag’)
querySelectorAll(‘selector’) (uses CSS selector, returns all matching elements)

Question 8

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

Answer 8

when you need to work with an element more than once

Question 9

What console method allows you to inspect the properties of a DOM element object?

Answer 9

console.dir

Question 10

Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 10

html loads top to bottom, the script needs to run after the page has loaded

Question 11

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

Answer 11

takes selector (like css selector) and returns a dom element

Question 12

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

Answer 12

takes selector (like css selector) and returns a NodeList of dom element(s)