DOM

Question 1

Why do we log things to the console?

Answer 1

To see easily and more directly the code whenever I check or fix it.

Question 2

What is a “model”?

Answer 2

It contains interactive data

Question 3

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

Answer 3

HTML.

Question 4

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

Answer 4

It referring to the JavaScript language.

Question 5

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

Answer 5

querySelector and getDocumentByID.

Question 6

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

Answer 6

querySelectorAll

Question 7

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

Answer 7

It reduces the computer’s work.

Question 8

What console method allows you to inspect the properties of a DOM element object?

Answer 8

dir (directory).

Question 9

Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 9

Because of the source order.

Question 10

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

Answer 10

It takes an element, class, id, etc’s name and it returns their values.

Question 11

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

Answer 11

It takes an element, class, id, etc’s name and it returns all of their values under the same name tag.

Question 12

What is the purpose of events and event handling?

Answer 12

To handle and verify inputs and actions (user input, user actions, and browser actions).

Question 13

What do [] square brackets mean in function and method syntax documentation?

Answer 13

It’s optional. But the type and listener must be there.

Question 14

What method of element objects lets you set up a function to be called when a specific type of event occurs?

Answer 14

EventTarget method addEventListener().

Question 15

What is a callback function?

Answer 15

It’s a function passed to another function as an argument.

Question 16

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

Answer 16

The first argument.

Question 17

What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?

Answer 17

The target property of the event. Ask MDN.

Question 18

What is the difference between these two snippets of code? element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())

Answer 18

The second code, handleClick with parentheses means that this function works right now.

Question 19

What is the className property of element objects?

Answer 19

It gets and sets the value of the class attribute of the specified element.

Question 20

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

Answer 20

Using the getAttribute method.

Question 21

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

Answer 21

object name.textContent.

Question 22

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

Answer 22

No, because the event listener is not always needed.

Question 23

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

Answer 23

Because it reduces the work if I set up the value of the thing to the variable.

Question 24

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

Answer 24

Because it reduces the work if I set up the value of the thing to the variable.

Question 25

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

Answer 25

No.

Question 26

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

Answer 26

Using the appendChild() method.

Question 27

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

Answer 27

Attribute, and value of that attribute.

Question 28

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

Answer 28

Create the element, choose the spot you want to insert the new element and use the appendChild() method to append it on there.

Question 29

What is the textContent property of an element object for?

Answer 29

Reading and writing.

Question 30

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

Answer 30

Use setAttribute() method or className as a property of the object.

Question 31

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

Answer 31

We can reuse rather than work again about to get that result, Dynamism.

Question 32

What is the event.target?

Answer 32

The target property of the event interface is a reference to the object onto which the event was dispatched.

Question 33

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

Answer 33

event.target

Question 34

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

Answer 34

The argument is a selector and it returns itself or its ancestor.

Question 35

How can you remove an element from the DOM?

Answer 35

Using the .remove() method.

Question 36

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 36

Using event.delegation.