DOM

Question 1

Why do we log things to the console?

Answer 1

To check and make sure our output is correct and for debugging

Question 2

What is a “model”?

Answer 2

A representation or recreation of an object/item

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

Data type objects in JavaScript

Question 5

What is a DOM Tree?

Answer 5

An element with all its configuration

The giant DOM tree that contains multiple DOM trees within it

Question 6

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

Answer 6

querySelector
getElementByID

Only use querySelector as getElementByID is the old way

Question 7

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

Answer 7

querySelectorAll

Only one you need to use for selecting all elements

Question 8

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

Answer 8

To store for later use

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

All the elements load before the script so you will get null if you put the file above

Question 11

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

Answer 11

The CSS selector syntax that selects all elements and returns only the first one that matches it

Question 12

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

Answer 12

The CSS selector syntax and returns all the elements that match it

Question 13

What is the purpose of events and event handling?

Answer 13

Event listener listens for the events and handling calls the functions that relate to it

Question 14

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

Answer 14

No

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

What is a callback function?

Answer 16

Passing function as an argument to another function

Question 17

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

Answer 17

An object filled with properties that describe the event

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

The element where the event occured

What is the event.target?

MDN

Question 19

What is the difference between these two snippets of code?

element.addEventListener(‘click’, handleClick)

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

Answer 19

First one is passing the function as a value and the second one is calling the function right now

Question 20

What is the className property of element objects?

Answer 20

Gets the current set of class elements and sets the value of the class element

Question 21

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

Answer 21

element.className =

Question 22

What is the textContent property of element objects?

Answer 22

Get or set the current value of the text element

Question 23

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

Answer 23

element.textContent =

Question 24

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

Answer 24

No

Question 25

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

Answer 25

Storing it in variables allows you to reuse again compared to finding it in the DOM and having to convert it

Question 26

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

Answer 26

Focus

Question 27

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

Answer 27

Blur

Question 28

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

Answer 28

Input

Question 29

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

Answer 29

Submit

Only fires on the form element itself, not the submit button (never put a click event listener on the button)

Question 30

What does the event.preventDefault() method do?

Answer 30

Prevents the browser from automatically reloading the page with the form’s values in the URL

Question 31

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

Answer 31

It will refresh the page with the forms data in the URL

Question 32

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

Answer 32

form.elements

Question 33

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

Answer 33

.value

Question 34

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

Answer 34

You can have bugs in the code and not know about it

Question 35

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

Answer 35

You can see bugs appear right away

Question 36

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

Answer 36

No, it only creates it

Question 37

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

Answer 37

document.appendChild()

Question 38

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

Answer 38

Name and value

Question 39

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

Answer 39

Create element and assign to variable, set class name/attribute, optional text node, query for the parent element, and append as child to parent element

Question 40

What is the textContent property of an element object for?

Answer 40

For assigning text to an element or see what the current text of the element is

Question 41

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

Answer 41

Using document.className method or document.setAttribute

Question 42

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

Answer 42

You only have to create it once and it can be reused over and over

Don’t have to retype it over again

Question 43

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

Answer 43

It removes the element from the page

Element is no longer part of the document flow

Question 44

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

Answer 44

A CSS selector and returns a boolean on whether that element has that selected selector

Question 45

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

Answer 45

getAttribute()

Takes the name of the attribute as an argument

Question 46

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

Answer 46

After each line of code

Question 47

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

Answer 47

Bubbling

Question 48

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

Answer 48

A CSS selector the form of a string and returns the closest ancestor/parent element that matches it

Returns null if nothing matches it

Question 49

How can you remove an element from the DOM?

Answer 49

.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 the event listener to the parent