DOM 1

Question 1

Why do we log things to the console?

Answer 1

to see what’s going on in the code and help with debugging

Question 2

What is a “model”?

Answer 2

replica. when browser loads a web page, it creates a model of the page in memory.

Question 3

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

Answer 3

HTML document.

Question 4

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

Answer 4

javascript object.

Question 5

What is a DOM Tree?

Answer 5

the way in which the browser should structure the model. (Model of a web page made of objects)

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.querySelectorAll()

Question 8

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

Answer 8

to save time and be able to access the variable multiple times.

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

Javascript is often used to manipulate DOM and add new functionality to the webpage. If tag is not added at end of the tag, DOM may not be ready by that time, thus preventing javascript to work on it, leading to unknown behaviors.

Question 11

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

Answer 11

it takes CSS selector as parameter and returns the first element within the document that matches the specified selector.

Question 12

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

Answer 12

it takes CSS selector as parameter and returns non-live NodeList containing one element object for each element that matches at least one of the specified selectors or an empty NodeList in case no matches.

Question 13

Why do we log things to the console?

Answer 13

to see what’s going on in the code and help with debugging

Question 14

What is the purpose of events and event handling?

Answer 14

Event handlers can be used to handle and verify user input, user actions, and browser actions:

• Things that should be done every time a page loads
• Things that should be done when the page is closed
• Action that should be performed when a user clicks a button
• Content that should be verified when a user inputs data

Question 15

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

Answer 15

no

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

callback function is 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

Event object

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 target property of the Event interface is a reference to the object onto which the event was dispatched. MDN.

Question 20

What is the className property of element objects?

Answer 20

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

Question 21

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

Answer 21

className property or classList property

Question 22

What is the textContent property of element objects?

Answer 22

The textContent property of the Node interface represents the text content of the node and its descendants.

Question 23

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

Answer 23

textContent property or innerHTML property

Question 24

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

Answer 24

no

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

more complicated.

Question 26

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

Answer 26

makes the code unreliable when stored in DOM

Question 27

what is the difference between two codes?

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

Answer 27

in the first code, we are passing in handleclick function as call back function and in the second code, we are just calling the function handleClick; hence in the second code we are returning the result of the function value.