DOM

Question 1

Why do we log things to the console?

Answer 1

We could determine what the code is doing and help us debug.

Question 2

What is a “model”?

Answer 2

copy or representation of something

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

objects in the model that represent a different part of the page loaded in the window and refers to javascript object.

Question 5

What is a DOM Tree?

Answer 5

layer of how the browser structure the model.

Question 6

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

Answer 6

getElementById(‘id’), querySelector(‘css selector’)

Question 7

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

Answer 7

getElementByClassName(),
getElementsByTagName(),
querySelectorAll()

Question 8

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

Answer 8

to store reference or location of an element you’re trying to retrieve into the variable so browser doesn’t have to keep going back to look for the element.

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

If the script is at the bottom, the html content can be uploaded first by the browser and then run javascript

Question 11

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

Answer 11

takes css selectors as an argument and returns the first matching element.

Question 12

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

Answer 12

takes css selectors as an argument and return all the matching elements - nodeList.

Question 13

Why do we log things to the console?

Answer 13

We log things to check our process and to debug

Question 14

What is the purpose of events and event handling?

Answer 14

The purpose is to control user input specifically and user interaction by adding dynamic content.

Question 15

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

Answer 15

e

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

e

Question 17

What is a callback function?

Answer 17

when a function is passed into another function as an argument.

Question 18

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

Answer 18

e

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

place where the event occurred.

Question 20

What is the difference between these two snippets of code?

Answer 20

second one is calling the function, but calling it now and returns undefined since no argument is called.

Question 21

What is the className property of element objects?

Answer 21

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

Question 22

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

Answer 22

Get that element from the dom and use new value, assign property

Question 23

What is the textContent property of element objects?

Answer 23

text inside of that element

Question 24

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

Answer 24

node.textContent

Question 25

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

Answer 25

By default when event handler functions are executed will pass the event object, so it is not always necessary. However, It is useful for the function to see the event that happened.

Question 26

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

Answer 26

More complicated since there’s no measurement to see when to change the colors

Question 27

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

Answer 27

Storing information in variables allow us to see increments and change of values. For variables, value can change over time, therefore, it is easier to manipulate.

Question 28

What does the transform property do?

Answer 28

They let you rotate, scale, skew or translate an element

Question 29

Give four examples of CSS transform functions

Answer 29

rotate, translate, scale, skew, matrix

Question 30

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

Answer 30

no it does not put it on the page

Question 31

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

Answer 31

append, appendChild

Question 32

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

Answer 32

attribute you want to set and

Question 33

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

Answer 33

query select and create the element and put it inside the selected element

Question 34

What is the textContent property of an element object for?

Answer 34

get or set text content

Question 35

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

Answer 35

setAttribute() , className property, classList property

Question 36

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

Answer 36

take in data and spit out the result of the data

Question 37

What is the event.target?

Answer 37

stores where the object originated from

Question 38

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

Answer 38

because of event bubbling

Question 39

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

Answer 39

event.target.tagName

Question 40

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

Answer 40

selector

Question 41

How can you remove an element from the DOM?

Answer 41

remove() need to call element that you want to remove

Question 42

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 42

A