dom

Question 1

Why do we log things to the console?

Answer 1

to check for bugs and to see what things are

Question 2

What is a “model”?

Answer 2

representation of something else

Question 3

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

Answer 3

the document node at the top of the tree

Question 4

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

Answer 4

each node is an object with methods and properties

Question 5

What is a DOM Tree?

Answer 5

A diagram showing parent to child and sibling relations between nodes.

Question 6

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

Answer 6

.querySelector() and .geElementById()

Question 7

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

Answer 7

.getElementsByClassName()

Question 8

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

Answer 8

so you don’t have to type the method out everytime to get the same DOM query

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

because the HTML content needs to be written before it can be called by the domquery.

Question 11

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

Answer 11

it takes a selector and returns the first element int he document that matches the specified selector

Question 12

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

Answer 12

it returns a nodelist that matches a group of selectors.

Question 13

Why do we log things to the console?

Answer 13

to see what’s happening and know where we are

Question 14

What is the purpose of events and event handling?

Answer 14

execute code when an event occurs- have user interaction

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

function that is passed into another function as an argument which is then invoked inside the outer function to complete an action

Question 18

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

Answer 18

the event

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 property of the event object- holds element that was interacted with, console log event.target

Question 20

What is the difference between these two snippets of code?

element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())

Answer 20

handleclick() will run and what is returned is passed as the argument.
handleclick does not return and just runs when the click event happens

Question 21

What is the className property of element objects?

Answer 21

it is the class attribute of the element.

Question 22

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

Answer 22

document.queryselector().className =

Question 23

What is the textContent property of element objects?

Answer 23

shows the textcontent of the element

Question 24

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

Answer 24

document.queryselector().textcontent =

Question 25

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

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

more complicated

Question 27

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

Answer 27

can call the variable at multiple locations and uses

Question 28

What does the transform property do?

Answer 28

lets you rotate, scale, skew, or translate an element

Question 29

Give four examples of CSS transform functions.

Answer 29

rotate, scale, skew, trasnlate

Question 30

The transition property is shorthand for which four CSS properties?

Answer 30

transition-delay transition-duration transition-property transition-timing-function

Question 31

What event is fired when a user places their cursor in a form control?

Answer 31

focus event

Question 32

What event is fired when a user's cursor leaves a form control?

Answer 32

blur event

Question 33

What event is fired as a user changes the value of a form control?

Answer 33

input event

Question 34

What event is fired when a user clicks the "submit" button within a ?

Answer 34

submit event

Question 35

What does the event.preventDefault() method do?

Answer 35

prevents the default action from taking place if the event is not explicitly handled

Question 36

What does submitting a form without event.preventDefault() do?

Answer 36

resets the page

Question 37

What property of a form element object contains all of the form's controls.

Answer 37

elements property

Question 38

What property of a form control object gets and sets its value?

Answer 38

value property

Question 39

What is one risk of writing a lot of code without checking to see if it works so far?

Answer 39

will have a difficult time seeing where the code went wrong if it doesn't work

Question 40

What is an advantage of having your console open when writing a JavaScript program?

Answer 40

can see what is happening and see errors if they occur

Question 41

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

Answer 41

No

Question 42

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

Answer 42

append.child

Question 43

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

Answer 43

(attribute, value)

Question 44

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

Answer 44

make the element, append textnode into it if it has text, append the element to parent element on the page

Question 45

What is the textContent property of an element object for?

Answer 45

to point to the textContent of the element

Question 46

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

Answer 46

element.className = | setattribute(class, classname)

Question 47

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

Answer 47

can call multiple times to create multiple trees for different data can have page interactions to call the function

Question 48

What is the event.target?

Answer 48

target property of the event. the object onto which the event occured. element that started the event

Question 49

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

Answer 49

event bubbling

Question 50

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

Answer 50

.tagName

Question 51

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

Answer 51

a selector. returns closest matching element

Question 52

How can you remove an element from the DOM?

Answer 52

.remove()

Question 53

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 53

create a container for them that has the event listener and filters for the element nodeNames or tags

Question 54

What is the event.target?

Answer 54

target property of the event. the object onto which the event occured. element that started the event

Question 55

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

Answer 55

it is hidden. removed from page

Question 56

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

Answer 56

returns a boolean

Question 57

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

Answer 57

.getAttribute()

Question 58

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

Answer 58

Any step that something is assigned or produces a value

Question 59

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 59

Would have to add an eventlistener to each tab

Question 60

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 60

would have to hard code each tab[i] to check if it matched e.target and then hard code the addition or removal of classes

Question 61

What is a breakpoint in responsive Web design?

Answer 61

The points at which a media query is introduced are known as breakpoints.

Question 62

What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a "column" class in a responsive layout?

Answer 62

useful for different screen sizes

Question 63

If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will "win". Why is that?

Answer 63

css cascading overrides with the latest introduced css ruleset

Question 64

What is JSON?

Answer 64

javascript object notation

Question 65

What are serialization and deserialization?

Answer 65

Serialization is the process of turning an object in memory into a stream of bytes so you can do stuff like store it on disk or send it over the network.

Question 66

Why are serialization and deserialization useful?

Answer 66

can store objects and send them

Question 67

How do you serialize a data structure into a JSON string using JavaScript?

Answer 67

stringify

Question 68

How do you deserialize a JSON string into a data structure using JavaScript?

Answer 68

JSON.parse

Question 69

How to you store data in localStorage?

Answer 69

localStorage.setitem()

Question 70

How to you retrieve data from localStorage?

Answer 70

localStorage.getitem()

Question 71

What data type can localStorage save in the browser?

Answer 71

JSON,

Question 72

When does the 'beforeunload' event fire on the window object?

Answer 72

before the window, document, and its resources unload