JS dom-querying, events, and manipulation

Question 1

Why do we log things to the console?

Answer 1

to double check our work , inspect value

Question 2

What is a “model”?

Answer 2

model is a replica of something/representation 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

object is a datatype in javascript

Question 5

What is a DOM Tree?

Answer 5

a javascript object for an html element- including all of its elements, attributes and all of its children

Question 6

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

Answer 6

document.querySelector(‘element’)
getElementById(‘#idName’)
* can use querySelector for every thing*

Question 7

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

Answer 7

querySelectorAll(‘element’)

Question 8

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

Answer 8

in case you need to access that specific element 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 script tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 10

browser needs to inspect entire document before javaScript can access them

Question 11

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

Answer 11

takes a string and its css selector- return is the first element it finds that matches that selector

Question 12

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

Answer 12

takes a string and its css selector and returns a node list of elements that match that selector

Question 13

Why do we log things to the console?

Answer 13

to double check our work and inspect values

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

function passed into another function as an argument,

Question 17

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

Answer 17

an object with properties that contain all the data describing that 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

where the event occurs (NOT the element that event is attached to)
-console.log and then MDN

Question 19

What is the difference between these two snippets of code?

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

Answer 19

the first one is being passed a function as an argument, the second one is calling that function and the return of that function is being passed before the event listener even happens

Question 20

What is the purpose of events and event handling?

Answer 20

keep track of user interaction

Question 21

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

Answer 21

more complicated

Question 22

What is the className property of element objects?

Answer 22

shows the class name of the selected element and allows you to set it to a different one (GET or SET)

Question 23

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

Answer 23

property className

ex) element.className = ‘newClass’

Question 24

What is the textContent property of element objects?

Answer 24

shows the text content of the selected element and allows you to change it

Question 25

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

Answer 25

property textContent

ex) element.textContent = ‘newText content’

Question 26

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

Answer 26

no, but most of time it will be