DOM

Question 1

Why do we log things to the console?

Answer 1

to check the output of your coding to see if it is working correctly

Question 2

What is a “model”?

Answer 2

copy of the structure of an html document.

Question 3

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

Answer 3

the html page.

Question 4

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

Answer 4

javascript object.

Question 5

What is a DOM Tree?

Answer 5

Data representation of all elements and its child elements.

Question 6

Give two examples ofdocumentmethods that retrieve a single element from the DOM.

Answer 6

getelementbyid and query selector.

Question 7

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

Answer 7

queryselectorall

Question 8

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

Answer 8

so that you can easily access that DOM variable. Reuse it.

Question 9

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

Answer 9

console.dir

Question 10

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

Answer 10

so that body contents of html can load first.

Question 11

What does queryselector take as its argument and what does it return?

Answer 11

string of css selector, first of the matching elements.

Question 12

What does queryselectorall take as its argument and what does it return?

Answer 12

string of css selector, returns all of the elements that match.

Question 13

What is the purpose of events and event handling?

Answer 13

events occur based on user interaction. Event handling are steps that lead to the trigger.

Question 14

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

Answer 14

no

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 event listener

Question 16

What is a callback function?

Answer 16

a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Question 17

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

Answer 17

event object with a report on a specific event for you to work with.

Question 18

what is event.target? If you werent sure, how would you check? Where could you get more information about it?

Answer 18

a reference to the object onto which the event was dispatched. MDN

Question 19

What is the className property of element objects?

Answer 19

used to update classname attribute.

Question 20

How do you update the CSS class attribute of an element using JavaScript?

Answer 20

Using className property

Question 21

What is textContent properly of element objects?

Answer 21

add or update text.

Question 22

How do you update the text within an element using JavaScript?

Answer 22

use text content property

Question 23

is the event parameter of an event listener callback always useful?

Answer 23

no

Question 24

Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?

Answer 24

more complicated

Question 25

Why is storing information about a program in variables better than only storing it in the DOM?

Answer 25

can make website load faster. Easier to maintain your code.

Question 26

What is event.target?

Answer 26

contains helpful data about the event, such as which element the event happened on.

Question 27

Why is it possible to listen for events on one element that actually happen its descendent elements?

Answer 27

Bubble up to the parent elements. Event is carried forward to each ancestor chain.

Question 28

What DOM element property tells you what type of element it is?

Answer 28

tagName, nodeName.

Question 29

what does the closest method take as its argument and what does it return?

Answer 29

String of css selector, returns Dom that matches that selector.

Question 30

How can you remove an element from the DOM?

Answer 30

• remove() on the Dom element you want to remove.

Question 31

If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?

Answer 31

you would add it to the parent element that retains all of the originating elements.