DOM

Question 1

Why do we log things to the console?

Answer 1

Show check if our code is doing what its supposed to be doing; debugging

Question 2

What is a “model”?

Answer 2

A representation of HTML on a webpage

Question 3

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

Answer 3

The document is the web page

Question 4

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

Answer 4

The different parts that the web page is made of

Question 5

What is a DOM Tree?

Answer 5

A model of a web page made out of objects, with each object representing a different part of the web page

Question 6

Give two examples ofdocumentmethods that retrieve a single element from the DOM.

Answer 6

querySelector method, getElementById method

Question 7

Give one example of adocumentmethod that retrieves multiple elements from the DOM at once.

Answer 7

getElementsByClassName method

Question 8

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

Answer 8

You may need to work with the element more than once, so it makes it easily accessible

Question 9

Whatconsolemethod allows you to inspect the properties of a DOM element object?

Answer 9

console.dir()

Question 10

Why would atag 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 doesdocument.querySelector()take as its argument and what does it return?

Answer 11

It takes a selector for an element as the argument, and returns the first element on the document with that specified selector

Question 12

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

Answer 12

It takes a selector for an element and returns a Nodelist of all the elements on the page that match that selector

Question 13

Why do we log things to the console?

Answer 13

To show that the code is doing what its supposed to be doing and to debug it

Question 14

What is the purpose of events and event handling?

Answer 14

It gives a response to user input.

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 method

Question 17

What is a callback function?

Answer 17

A function that 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

The event object

Question 19

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

Answer 19

It returns the element that triggered the event. You can log it to the console to find more information about it

Question 20

What is theclassNameproperty of element objects?

Answer 20

It lets you set a new value for the class attribute for an element

Question 21

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

Answer 21

Have a new class name assigned to the className property of your chosen element object

Question 22

What is thetextContentproperty of element objects?

Answer 22

It allows you to get all the text content of that element and update it also

Question 23

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

Answer 23

Have some string text assigned to the textContent property of you chosen element object

Question 24

Is theeventparameter 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

Would have been a lot more steps

Question 26

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

Answer 26

You may need to work with the element more than once, so it makes it easily accessible

Question 27

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

Answer 27

It creates a new HTML element but it needs to be appended to the page still

Question 28

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

Answer 28

Use the appendChild Method and pass the element as the argument

Question 29

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

Answer 29

A string for the name of the attribute and a string for the value of the attribute

Question 30

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

Answer 30

Create a element and store it in a variable

Use the appendChild Method to attach it to the html

Question 31

What is thetextContentproperty of an element object for?

Answer 31

It gets the text content of the element and can also set the text content for an element

Question 32

Name two ways to set theclassattribute of a DOM element.

Answer 32

Use the setAttribute method
Use the className property/method?
Add method of classList

Question 33

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

Answer 33

You can create a Dom tree for a list of things like an array
It can help with debugging

Question 34

What is theevent.target?

Answer 34

The element that the event was triggered from

Question 35

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

Answer 35

Bc HTML elements nest inside other elements. The event flows from the lease specific node towards the most specific node. Also known as event bubbling.

Question 36

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

Answer 36

The tagName property

Question 37

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

Answer 37

It takes one of the ancestor elements css selectors as an argument and returns the element that matches that css selector including itself;
Returns null if nothing is found

Question 38

How can you remove an element from the DOM?

Answer 38

The remove method

Question 39

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 39

You can add the event listener to the parent element