dom

Question 1

Why do we log things to the console?

Answer 1

access of value

Question 2

What is a “model”?

Answer 2

representation of a structure

Question 3

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

Answer 3

HTML document

Question 4

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

Answer 4

js object; a object that is modeling the object document

Question 5

What is a DOM Tree?

Answer 5

object model; model made of objects; stored in browser’s memory

Question 6

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

Answer 6

querySelector(), getElementById()

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

reuse the method

Question 9

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

Answer 9

method dir of object console; 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

Question 11

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

Answer 11

arg: a string css selector
return: first of the matching elements from top

Question 12

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

Answer 12

arg: a string css selector
return: node list of one element object for each element that matches the css selector

Question 13

dom node?

Answer 13

an object with methods and properties; every node is a descendant of the document node

Question 14

Why do we log things to the console?

Answer 14

.

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

addEventListener()

Question 16

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

Answer 16

no

Question 17

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

Answer 17

the event object

Question 18

What is a callback function?

Answer 18

a function passed into another function as an argument

Question 19

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

Answer 19

the event object; just a report on that event

Question 20

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

Answer 20

the target property at the event object; a reference to the object onto which the event was dispatched; mdn

Question 21

What is the className property of element objects?

Answer 21

retrieve/assign the value of an element’s class attribute

Question 22

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

Answer 22

query and assign a new variable to the className property

Question 23

What is the textContent property of element objects?

Answer 23

add or update text w/in a dom element

Question 24

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

Answer 24

use the textContent property to the element

Question 25

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

Answer 25

no

Question 26

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

Answer 26

complicated

Question 27

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

Answer 27

data accessibility

Question 28

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

Answer 28

data accessibility; keep it w/in js rather than dom

Question 29

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

Answer 29

no

Question 30

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

Answer 30

append child method

Question 31

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

Answer 31

name of attribute and it’s respective object property

Question 32

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

Answer 32

use a create element method of the document object

Question 33

What is the textContent property of an element object for?

Answer 33

the text content of the object and it’s children

Question 34

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

Answer 34

set attribute method and class name method

Question 35

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

Answer 35

data respective

Question 36

What is the event.target?

Answer 36

getting the target of the event (object; most specific element interacted with); reference to the object onto which the event occurred

Question 37

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

Answer 37

event bubbling: the event starts at the most specific node and flows outwards to the least specific one; the default type of event flow

Question 38

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

Answer 38

tagName; which is a read-only property of the element interface returns the tag name of the element on which it’s called

Question 39

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

Answer 39

arg: a selector list
return: element which is the closest ancestor of the selected element

Question 40

How can you remove an element from the DOM?

Answer 40

Element.remove() method removes the element from the tree it belongs to

Question 41

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 41

Event delegation

Question 42

what is event delegation?

Answer 42

Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent

Question 43

What is the event.target?

Answer 43

reference to the object onto which the event occurred

Question 44

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

Answer 44

will remove it from the accessibility tree

Question 45

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

Answer 45

arg: string representing the selector
return: boolean value

Question 46

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

Answer 46

get attribute method

Question 47

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

Answer 47

each step continually

Question 48

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 48

event capturing; add another event listeners to new tab node; least specific node to most specific

Question 49

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 49

check each attribute property of each element in separate conditionals