DOM

Question 1

Why do we log things to the console?

Answer 1

So we can verify the outputs. Further, troubleshoot and
debugging.

Question 2

What is a ”model”?

Answer 2

A model is a representation(or recreation) of something. In the case of DOM, it
is a copy of the page layout before any changes are applied

Question 3

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

Answer 3

The document is the entire HTML document

Question 4

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

Answer 4

The objects are JavaScript objects

Question 5

What is a DOM Tree? A DOM Tree is a model of the HTML code.

Answer 5

It arranges the elements in a
HTML file by their elements and relationship to each other

Question 6

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

Answer 6

We can use getElementById() and querySelector() to select single elements from the DOM

Question 7

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

Answer 7

getElementsByClassName(), getElementsByTagName(), or querySelectorAll()

Question 8

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

Answer 8

So we can console log and verify we selected the correct element or to use it to modify the page later on

Question 9

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

Answer 9

console.dir() is used to inspect an element’s properties in the console

Question 10

Why would a

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

Answer 10

It is placed at the bottom because a browser needs to run all of the HTML first before we can access them

Question 11

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

Answer 11

It takes in a string that must also be a valid CSS selector. It will return an element object that represents the first element in the document that matches the specified CSS selector

Question 12

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

Answer 12

It takes in a string that must also be one or many valid CSS selectors separated by commas. It will return a list with the elements that corresponds to the CSS selectors

Question 13

What is the purpose of events and event handling?

Answer 13

Events are used for detecting when a user interacts with a web page. Event handling is a way to respond to the user’s interactions

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(’Event’,functionName), ’Boolean’ (default: false. Optional)

Question 16

What is a callback function?

Answer 16

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 17

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

Answer 17

The Event object. The
content is all of the data regarding the object that has occurred

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

The target property of the Event interface is a reference to the object onto
which the event was dispatched. It shows which element the effect is taking place for. If we are unsure, we can check MDN. It is the element where the event occurred, not the element the event was applied

Question 19

What is the difference between these two snippets of code?
– element.addEventListener(’click’, handleClick)
– element.addEventListener(’click’, handleClick())

Answer 19

First one is referencing a function where the second one uses the handleClick’s function’s return value as an argument

Question 20

What is the className property of element objects?

Answer 20

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

Question 21

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

Answer 21

We can use className property of the DOM

Question 22

What is the textContent property of element objects?

Answer 22

The textContent property of the Node interface
represents the text content of the node and its descendants

Question 23

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

Answer 23

We use textContent property. Select
the element with a DOM query and then assign the textContent of that selection to a new text content

Question 24

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

Answer 24

No, because we do not always need it to be calledback

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

Harder. Because we would need to create a new DOM everytime we want to update
the page

Question 26

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

Answer 26

This way we can refer back to it whenever we want

Question 27

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

Answer 27

No. It creates the
elements

Question 28

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

Answer 28

we use the appendChild() method

Question 29

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

Answer 29

A string of the name of
the attribute and a 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

1. Create the element – createElement()
2. Give it content – createTextNode()
3. Query select an element to append the element to – document.querySelector()
4. Append it to a child or before a selected DOM node – appendChild() or insertBefore(

Question 31

What is the textContent property of an element object for?

Answer 31

This is used for adding, changing, or
modifying the text content of the node and its decscendants

Question 32

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

Answer 32

We can use element.setAttribute() or
using class name property

Question 33

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

Answer 33

We can reuse the function elsewhere and use the return value elsewhere as well

Question 34

What is the event.target?

Answer 34

This will gives us the most specific element the event is interacting with

Question 35

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

Answer 35

The tagName property

Question 36

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

Answer 36

It takes in CSS
selectors. The function returns the closest ancestor element or itself which matches the selectors

Question 37

How can you remove an element from the DOM?

Answer 37

We can use the remove() method of the element
object

Question 38

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 38

We can add an event listener to the
parent of the list and use a function to determine if the child is being clicked or not. Or use event
delegation