DOM

Question 1

Why do we log things to the console?

Answer 1

Things are logged to the console for testing and tracking values when running a program.

Question 2

What is a “model”?

Answer 2

A “model” is a recreation of something.

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

The JavaScript object data type. (JavaScript Objects)

Question 5

What is a DOM Tree?

Answer 5

The DOM Tree is a model of web page that consists of four types of nodes: document, element, attribute, and text nodes.

Question 6

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

Answer 6

document.querySelector();

document.getElementByID();

Question 7

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

Answer 7

document.getElementsByTagName();

document.querySelectorAll();

Question 8

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

Answer 8

You may need to work with the query more than once.

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

So the content of the web page can be loaded first.

Question 11

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

Answer 11

A string representing the CSS selector. It returns the first element that matches the selector.

Question 12

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

Answer 12

A string representing the CSS selector. It returns a node list of matching elements.

Question 13

Why do we log things to the console?

Answer 13

Things are logged to the console for testing and tracking values when running a program.

Question 14

What is the purpose of events and event handling?

Answer 14

Events notify the program of any changes that may affect the code. Event handling takes place when an event takes place.

Question 15

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

Answer 15

No. Many are optional.

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 invoked inside the outer function.

Question 18

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

Answer 18

The event object which contains all the data about 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 event.target is whatever element the event occurred at.

Log the event.target to the console.

MDN.

Question 20

What is the difference between these two snippets of code?

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

Answer 20

The first snippet passes the callback function as a parameter to the method.

The second snipped passes the return of the function as a parameter to the method.

Question 21

What is the className property of element objects?

Answer 21

The className property gets the or sets the value of the class attribute in the element.

Question 22

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

Answer 22

By assigning the new value to the className property of the element object.

Question 23

What is the textContent property of element objects?

Answer 23

The textContent property gets the or sets the value of the text content in the element.

Question 24

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

Answer 24

The event parameter is not always useful because sometimes you want to make an event handler for one specific element only.

Makes it clear that it’s an event handler.

Question 25

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

Answer 25

The assignment would be more complicated because there would be no easy way to concatenate an updated value to the paragraph element.

Question 26

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

Answer 26

Storing information in variables allow for more flexible DOM manipulation or additional calculation.

Question 27

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

Answer 27

The focus event.

Question 28

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

Answer 28

The blur event.

Question 29

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

Answer 29

The input event.

Question 30

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

Answer 30

The submit event.

Question 31

What does the event.preventDefault() method do?

Answer 31

The method prevents the default action of the event form taking place.

Question 32

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

Answer 32

The webpage will refresh and the console will reset.

Question 33

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

Answer 33

The elements property of the form object.

Question 34

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

Answer 34

The value property.*

Question 35

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

Answer 35

Increased difficulty in finding where the error(s) occurred.

Question 36

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

Answer 36

Values can be tracked for any errors.

Question 37

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

Answer 37

No, the method just creates the element.

Question 38

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

Answer 38

The .appendChild() method.

Question 39

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

Answer 39

The name of the attribute and the value of the attribute.

Question 40

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

Answer 40

1. Create the element [.createElement()] 2. Add attributes or text content if needed [.setAttribute() or .textContent] 3. Add element to the parent element if needed [.querySelect() or .appendChild()]

Question 41

What is the textContent property of an element object for?

Answer 41

To get or set the content between the element's opening and closing tag.

Question 42

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

Answer 42

.className or .setAttribute()

Question 43

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

Answer 43

The function can be reused and the return of a function can be use din other parts of the program.

Question 44

What is the event.target?

Answer 44

A property that returns the HTML element that the event originated from.

Question 45

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

Answer 45

Event Bubbling which starts at the the most specific node and flows outward.

Question 46

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

Answer 46

The event.target.tagName property.

Question 47

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

Answer 47

The method takes a selector in the form of a string as an argument and it returns the closest ancestor element.

Question 48

How can you remove an element from the DOM?

Answer 48

The .remove() method.

Question 49

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 49

By applying the event listener to the parent element and checking if the event was triggered by the new element. (Event delegation)

Question 50

What is the event.target?

Answer 50

A property that returns the HTML element that the event originated from.

Question 51

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

Answer 51

The element it is applied to will no longer appear but is not deleted.

Question 52

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

Answer 52

The method takes a selector in the form of a string as an argument and it returns a Boolean value.

Question 53

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

Answer 53

The .getAttribute() method.

Question 54

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

Answer 54

After writing the event listener: Checking to see whether clicking on a tab is firing off the event. After writing the for loops to update the classes: Checking to see whether the class for the clicked tab is set to active.

Question 55

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 55

Additional code would be required to update the class attribute values for the new tab and its data.

Question 56

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 56

A long if-else statement.