DOM

Question 1

Why do we log things to the console?

Answer 1

To check if the output is what we expected

Question 2

What is a “model”?

Answer 2

A recreation of the original.

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

The Javascript object.

Question 5

What is a DOM Tree?

Answer 5

Dom node plus all of the elements that make it up.

Question 6

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

Answer 6

getElementById() / querySelector()

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

To reuse the result.

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 tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 10

So that the contents can load top to bottom first.

Question 11

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

Answer 11

A string of CSS Selector and takes the first element that matches in the document.

Question 12

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

Answer 12

String of CSS Selector and returns all elements that match the selector in the node list.

Question 13

Why do we log things to the console?

Answer 13

To check our output

Question 14

What is the purpose of events and event handling?

Answer 14

To add user functionality to the webpage.

Question 15

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

Answer 15

No

Question 16

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

Answer 16

addEventListener()

Question 17

What is a callback function?

Answer 17

A function passed into another function as an argument.

Question 18

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

Answer 18

Event object.

Question 19

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

Answer 19

Target is the place the element that we are dealing with originated from.

Question 20

What is the textContent property of element objects?

Answer 20

Adjust the text within an element

Question 21

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

Answer 21

Assign new text content to the dom object.

Question 22

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

Answer 22

No.

Question 23

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

Answer 23

More complicated.

Question 24

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

Answer 24

To make re-usable variables.

Question 25

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

Answer 25

No.

Question 26

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

Answer 26

element.appendChild(achild)

Question 27

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

Answer 27

Name, Value.

Question 28

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

Answer 28

Create the element, create text node, append child

Question 29

What is the textContent property of an element object for?

Answer 29

Adding text content

Question 30

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

Answer 30

setAttribute, className

Question 31

What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?

Answer 31

Repeating behavior and using the function multiple times.

Question 32

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

Answer 32

The event is carried through each layer of its ancestors.

Question 33

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

Answer 33

tagName.

Question 34

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

Answer 34

takes a css selector and returns dom element that is closest one.

Question 35

How can you remove an element from the DOM?

Answer 35

domelement.remove()

Question 36

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 36

Add event to one layer higher than targeted element.

Question 37

What is the event.target?

Answer 37

Dom element object where the event originated

Question 38

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

Answer 38

Removes element from document flow (hides)

Question 39

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

Answer 39

takes a string of a css selector as an argument and returns a boolean value.

Question 40

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

Answer 40

getAttribute()

Question 41

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

Answer 41

Every step.

Question 42

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 42

Make new event listener for every view.

Question 43

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?

Answer 43

Use a lot of if statements and loops.