DOM Query

Question 1

Why do we log things in the console?

Answer 1

debugging purposes.

Question 2

What is a “model”?

Answer 2

a copy of something.

Question 3

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

Answer 3

the html document

Question 4

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

Answer 4

referring to the data type object in javascript.

Question 5

What is a DOM tree?

Answer 5

is an element with all of its contents and objects represented in a dom tree.

Question 6

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

Answer 6

getElementById() and document.querySelector()

Question 7

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

Answer 7

document.querySelectorAll()

Question 8

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

Answer 8

If you’re going to use it many times in your javascript.

Question 9

What console method allows you to assign the return value of a DOM query to a variable?

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

so that when the webpage loads all the content of the web page has been loaded before the script.

Question 11

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

Answer 11

it takes a string element with css selectors and returns their values.

Question 12

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

Answer 12

CSS selectors and it returns a NodeList

Question 13

What is the purpose of events and event handling?

Answer 13

they’re listening for specific events or waiting. events are functions that “handle” the function that javascript is listening for.

Question 14

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

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

create .addEventListener, the string

Question 16

What is a callback function?

Answer 16

a function which is to be executed after another function has finished execution.

Question 17

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

Answer 17

an object with a huge set of properties that set an event to occur.

Question 18

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

Answer 18

it’s the element where the listener occured. log it out and look where it is.

Question 19

What is the difference between these two snippets of code?

Answer 19

the first one actually passes the event listener. it runs right then when you put into the function.

Question 20

What is the className property of element objects?

Question 21

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

Question 22

What is the textContent property of element objects?

Answer 22

it allows you to update the text that is contained in the element.

Question 23

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

Answer 23

the variable.text content = ‘string’ + variable.

Question 24

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

Question 25

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

Question 26

Does the document.createElement() method insert a new element into the page?

Question 27

How do you add an element as a child to another element?

Question 28

What do you pass as the arguments to the element.setAttribute() method?

Question 29

What steps do you need to take in order to insert a new element into the page?

Question 30

What is the textContent property of an element object for?

Answer 30

to add text to an element.

Question 31

Name two ways to set the class attribute of a DOM element.

Answer 31

className setAttribute()

Question 32

What are the two advantages

Question 33

What is the event.target?

Question 34

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

Answer 34

bubbling

Question 35

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

Answer 35

tagName property. value has to be uppercase.

Question 36

What does the element.closest() method take as its argument and what does it return?

Answer 36

takes the argument closest to string. and returns the closest ancestor matching with the css selector.

Question 37

How can you remove an element from the DOM?

Answer 37

element.remove()

Question 38

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 38

add an eventListener to the ancestor. it’s called event delegation.

Question 39

What is the event.target?

Answer 39

element interacted with.

Question 40

What is the affect of something an element to display: none?

Answer 40

makes it so that it’s not visible. it’s still present though.

Question 41

What does the element.matches() method take as an argument and what does it return?

Answer 41

takes a css selector and returns a boolean whether or not it matches the selector.

Question 42

How can you retrieve the value of an element’s attribute?

Answer 42

element.getAttribute()

Question 43

At what steps of the solution would it be helpful to log things to the console?

Answer 43

every new line of code.

Question 44

If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?

Answer 44

conditionals for each individual view.

Question 45

If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?

Question 46

What is a breakpoint in responsive web design?