DOM

Question 1

Why do we log things to the console?

Answer 1

To check and debug our code

Question 2

What is a “model”?

Answer 2

data structure

Question 3

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

Answer 3

The HTML document/ entire document

Question 4

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

Answer 4

The objects that make up the Dom tree

Question 5

What is a DOM Tree?

Answer 5

THE DOM TREE IS A

MODEL OF A WEB PAGE consisting of objects

Question 6

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

Answer 6

getElementById()

querySelector()

Question 7

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

Answer 7

getElementsByClassName()
getElementsByTagName()
querySelectorAll()

Question 8

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

Answer 8

Save it to a variable to save us time to access later

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

The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.

Question 11

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

Answer 11

Takes a CSS selector 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

Uses a CSS selector as argument and returns all matching elements.

Question 13

Why do we log things to the console?

Answer 13

To check and debug our code.

Question 14

What is the purpose of events and event handling?

Answer 14

Allows you or a user to interact and then respond to events that happen

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

A 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

point of interaction ie. mouseclick, target property. mdn

Question 20

What is the difference between these two snippets of code?

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

Answer 20

the second is excuting a function handleClick

Question 21

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

Answer 21

No, only creates the element

Question 22

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

Answer 22

appendChild() method

Question 23

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

Answer 23

name and value

Question 24

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

Answer 24

create element node , query elector , appened child

Question 25

What is the textContent property of an element object for?

Answer 25

adding text content to an element and get text from element

Question 26

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

Answer 26

Element.setAttribute method, class name

Question 27

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

Question 28

What is the event.target?

Answer 28

The point of interaction by the user, target of the event

Question 29

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

Answer 29

Because of the event bubbling

Question 30

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

Answer 30

type property?

Question 31

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

Answer 31

A selector string and will return the Element which is the closest ancestor of the selected element.

Question 32

How can you remove an element from the DOM?

Answer 32

By using the Element.remove() method

Question 33

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 33

By targeting the parent element like in our task we targeted the .task-list

Question 34

What is the className property of element objects

Answer 34

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

Question 35

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

Answer 35

by using the className property of the Element

Question 36

What is the textContent property of element objects?

Answer 36

it represents the text content of the node and its descendants.

Question 37

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

Answer 37

by using the textCo | ntent property of the Element

Question 38

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

Answer 38

Yes the parameters are required but not all of them are useful.

Question 39

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

Answer 39

Yes the parameters are required but not all of them are useful.

Question 40

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

Question 41

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

Answer 41

Allows you to use that information again if needed.

Question 42

what is the event.target?

Answer 42

The target event property returns the element that triggered the event.

Question 43

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

Answer 43

Event delegation

Question 44

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

Question 45

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

Answer 45

a valid css selector or itself and returns the closest ancestor

Question 46

How can you remove an element from the DOM?

Answer 46

the remove method of the element object

Question 47

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?

Question 48

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

Answer 48

the affected element will disappear

Question 49

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

Answer 49

A string containing valid CSS selectors to test the Element against. Returns true if the element matches selector or false

Question 50

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

Answer 50

the getAttribute method

Question 51

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

Answer 51

after every step.

Question 52

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?