JavaScript - DOM

Question 1

Why do we log things to the console?

Answer 1

To see the values of the elements we’re accessing

Question 2

What is a “model”?

Answer 2

representation of the actual thing, but not actually it

Question 3

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

Answer 3

It represents the entire HTML page

Question 4

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

Answer 4

Each node of the DOM Tree, which has methods and properties

Question 5

What is a DOM Tree?

Answer 5

object modeling the document

any element within the DOM and all of its child contents

Question 6

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

Answer 6

getElementByID()

querySelector() - this is the one to use

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

Answer 10

to make sure all the contents can load first

Question 11

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

Answer 11

it takes a string of the selector type element

returns first element that matches the argument

Question 12

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

Answer 12

takes a string of the selector type element

returns a NodeList of all elements that match the argument

Question 13

Why do we log things to the console?

Answer 13

To see the values of the elements we’re accessing as a visual response

Question 14

What is the purpose of events and event handling?

Answer 14

allows us to interact with the webpage

Question 15

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

Answer 15

no

addEventListener takes functions without parentheses

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, which is then invoked inside the outer function to complete some kind of routine or action

Question 18

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

Answer 18

The function for 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

the element where the event occurred. Look at MDN for more info.
The element you applied event listener to

Question 20

What is the difference between these two snippets of code?

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

Answer 20

First one is a variable, second is a function being called (which isn’t good)

Question 21

What is the className property of element objects?

Answer 21

used to update the value of the class attribute of whatever that element is
retrieve the current value or assign

Question 22

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

Answer 22

assign a new value to the className property on that element

Question 23

What is the textContent property of element objects?

Answer 23

add or update text on an element on the page

Question 24

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

Answer 24

assign new variable or text content to the textContent property of the node object
Node.textContent = new text content

Question 25

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

Answer 25

no. Sometimes we don’t need it.

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

you’d have to calculate how many clicks every time

Question 27

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

Answer 27

You can reuse it as a variable

Question 28

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

Answer 28

focus event

Question 29

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

Answer 29

blur event

Question 30

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

Answer 30

input event

Question 31

What event is fired when a user clicks the “submit” button within a 'form' element?

Answer 31

submit event

Question 32

What does the event.preventDefault() method do?

Answer 32

prevents the browser from automatically reloading the page with the form's values in the URL

Question 33

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

Answer 33

refreshes the page

Question 34

What property of a form element object contains all of the form’s control.?

Answer 34

elements property | use name properties named after the values of the attribute

Question 35

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

Answer 35

value property

Question 36

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

Answer 36

you might have to redo it all | after you've written it all, if something breaks, it would be hard to figure out what was the issue

Question 37

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

Answer 37

you can console.log each eventhandler and see what's being fired

Question 38

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

Answer 38

no, makes nothing visual for the user

Question 39

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

Answer 39

elementNode.appendChild(newElement)

Question 40

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

Answer 40

first argument data type: string | second argument sometimes string, sometimes property

Question 41

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

Answer 41

* var newEl = document.createElement(‘div’) * query the DOM for the element we wanna put in, save in a variable * appendchild the variable with new element we created

Question 42

What is the textContent property of an element object for?

Answer 42

setting or returning text content of a DOM

Question 43

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

Answer 43

.setAttribute() | .className

Question 44

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

Answer 44

You can reuse the function *can use in eventListener what if you need to use same DOM tree in multiple places

Question 45

What is the event.target?

Answer 45

property that returns where the event occurred

Question 46

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

Answer 46

event is carried forward to each ancestor chain

Question 47

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

Answer 47

.tagName

Question 48

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

Answer 48

takes css selector string, returns DOM element closest to ancestor chain that matches the selector

Question 49

How can you remove an element from the DOM?

Answer 49

element.remove()

Question 50

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 50

add it to the closest parent element | delegate event to something higher up, and have it do something when event.targeted

Question 51

What is the event.target?

Answer 51

a property of the event object that returns where the event occurred

Question 52

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

Answer 52

removed from document flow | hides the element from the webpage

Question 53

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

Answer 53

takes the css selector string as the argument and returns a boolean whether it matches or not

Question 54

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

Answer 54

.getAttribute() method | element.getAttribute(attributeName)

Question 55

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

Answer 55

basically every step, check if everything you're creating is showing up correctly

Question 56

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 56

we'd have to create a new eventListener for every single view

Question 57

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 57

we'd have to write each conditional statement for each one