JavaScript DOM

Question 1

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

Answer 1

focus

Question 2

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

Answer 2

blur

Question 3

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

Answer 3

input

Question 4

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

Answer 4

submit

Question 5

What does the event.preventDefault() method do?

Answer 5

Prevents the page from automatically reloading after the form has been submitted and every events default behavior

Question 6

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

Answer 6

Reload the page and the form

Question 7

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

Answer 7

.elements

Question 8

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

Answer 8

.value

Question 9

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

Answer 9

Makes it harder to debug

Question 10

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

Answer 10

You get to keep track of everything

Question 11

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

Answer 11

NO

Question 12

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

Answer 12

appendChild()

Question 13

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

Answer 13

The attribute followed by the attribute value

Question 14

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

Answer 14

createElement()
createTextNode()
appendChild()

Question 15

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

Answer 15

createElement()
appendChild()

Question 16

What is the textContent property of an element object for?

Answer 16

To change the text content of an element or add

Question 17

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

Answer 17

element.setAttribute()
element.className()

Question 18

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

Answer 18

Reusability

Question 19

What is the event.target?

Answer 19

It’s a reference to whatever object it interacted with

Question 20

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

Answer 20

Event Bubbling

Question 21

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

Answer 21

event.target.tagName

Question 22

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

Answer 22

Takes a class name as an argument and returns the closest element to the method’s element with the argument class name

Question 23

How can you remove an element from the DOM?

Answer 23

With the element.remove() method

Question 24

If you wanted to insert a new clickable DOM element into the page using JavaScript, how could you avoid adding an event listener to every new element individually?

Answer 24

By appending that new element to a parent element that already has an event listener to it

Question 25

What is the event.target?

Answer 25

A reference to the object onto the event being fired

Question 26

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

Answer 26

It’ll be removed from the page

Question 27

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

Answer 27

It takes a selector as the argument and returns either true or false if that selector matches the element

Question 28

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

Answer 28

getAttribute() method

Question 29

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

Answer 29

On all steps

Question 30

If you were to add another tab and view to your HTML, but you didn’t use even delegation, how would your JavaScript code be written instead?

Question 31

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?