DOM

Question 1

Why do we log things to the console?

Answer 1

We log things as a console both to make sure that the main.js file is interacting with the html file and so that we as developers can test and track values (debugging)

Question 2

What is a “model”?

Answer 2

A recreation of something (generally not 1:1 recreation)

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

The JavaScript object data type

Question 5

What is the DOM?

Answer 5

A JavaScript object that is modeling the contents of an HTML document that is loaded into the browser

Question 6

What is a DOM Tree?

Answer 6

The DOM tree is a list of objects/nodes that branch off of the document node. It is made up of the different elements, attributes, and text nodes in an HTML document. It is an element plus all of its content and all of its configurations.

Question 7

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

Answer 7

document. getElementbyID(‘id’);

document. querySelector(‘css selector’);

Question 8

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

Answer 8

document. querySelectorAll(‘css selector’);
document. getElementsByClassName(‘class’);
document. getElementsByTagName(‘tag name’);

Question 9

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

Answer 9

In case you need to re-use that value of a DOM query multiple times

Question 10

What console method allows you to inspect the properties of a DOM element object?

Answer 10

console.dir( ); [ dir is short for directory]

Question 11

Why would a tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 11

Because we want to load the content of the HTML document first?

Question 12

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

Answer 12

document.querySelector( ); takes a css selector as it’s argument (in a string) and returns the first element that matches the selector

Question 13

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

Answer 13

document.querySelectorAll( ); takes a css selector as it’s argument (in a string) and returns all elements with that css selector (Node List)

Question 14

Why do we log things to the console?

Answer 14

We log things as a console both to make sure that the main.js file is interacting with the html file and so that we as developers can test and track values (debugging)

Question 15

What is the purpose of events and event handling?

Answer 15

Events are a way to let us know when an event occurs (usually when a user interacts with the page) and event handling is our way of preparing a response when the event occurs

Question 16

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

Answer 16

No, there are some parameters that are optional

Question 17

What method of element objects lets you set up a function to be called when a specific type of event occurs?

Answer 17

Use addEventListener to the object you want to call the event on

Question 18

What is a callback function?

Answer 18

A callback function is a function benign passed into another function as an argument

Question 19

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

Answer 19

The event object is passed and the data is all the information of when the event was invoked

Question 20

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

Answer 20

The value of the element where the event occurred it is not the element that the event listener is applied on
We can check by console logging the target property of the event object
We can either check the code or MDN for more information

Question 21

What is the difference between these two snippets of code?

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

Answer 21

The first one is a callback function and the second is a function call with no argument. Because of this it runs the function with nothing but the first one will run with the event as it’s argument

Question 22

What is the className property of element objects?

Answer 22

A string of the class attribute of an element
It can get or set the className attribute on an HTML document

Question 23

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

Answer 23

You use the .className on the variable storing the DOM information and assign it a string value of the new class name

Question 24

What is the textContent property of element objects?

Answer 24

The textContent property is the text content of a node on the DOM
Property that stores any text content that is present in the node

Question 25

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

Answer 25

Use the .textContent on the variable storing the DOM information and assign it the new text you want it to have

Question 26

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

Answer 26

No, in functions where you don’t want things to vary you do not need the event parameter But in general we will want to use the event parameter in most cases

Question 27

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

Answer 27

Harder because instead of referencing a variable with the number of clicks in it, we would have to calculate the number of clicks for each spot we want to check the value of the clicks

Question 28

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

Answer 28

If we store the information in a variable then the computer does not have to process getting the value multiple times and makes the work more efficient for the computer. For developers it also makes it easier to read by knowing that we are referencing back to an already stored value.

Question 29

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

Answer 29

No it does not, it just creates the element. You need to appendChild to insert the element made into the document

Question 30

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

Answer 30

With the appendChild method

Question 31

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

Answer 31

The attribute you want to set and the value you want to assign

Question 32

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

Answer 32

Create the element, append the element as the child of another element

Question 33

What is the textContent property of an element object for?

Answer 33

It is used to receive or modify the text content of an element

Question 34

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

Answer 34

element. className('new class name'); | element. setAttribute('class', 'new class name');

Question 35

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

Answer 35

The return of the reusable function can be used in other places (different contexts)

Question 36

What is the event.target?

Answer 36

The event.target is the target element that the event happens on

Question 37

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

Answer 37

Because of event bubbling

Question 38

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

Answer 38

event.target.tagName

Question 39

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

Answer 39

It takes a css selector and returns the closest ancestor element (or itself) that matches the argument

Question 40

How can you remove an element from the DOM?

Answer 40

‘Item you want to remove in a DOM variable’ . remove();

Question 41

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 41

Create a click on all the elements and set a conditional that if the tagName is === to the element you want to affect, then make the changes, otherwise do nothing