DOM

Question 1

Why do we log things to the console?

Answer 1

To check if we got the desired results.

Question 2

What is a “model”?

Answer 2

An example of something

Question 3

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

Answer 3

The HTML document / whatever DOCTYPE is being declared

Question 4

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

Answer 4

• JavaScript objects
• Represents different parts of the page that is loaded
• The document represented as a large object that holds all info about its content

Question 5

What is a DOM Tree?

Answer 5

The model of the HTML webpage as a tree of objects.

Question 6

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

Answer 6

getElementByID: Selects an element by a specified ID

querySelector: CSS selectors

Question 7

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

Answer 7

• querySelectorAll
• getElementsByClassName
• getElementsByTagName

Question 8

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

Answer 8

Saves the browser time looking for the element again. Also makes it easier to reuse.

Question 9

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

Answer 9

console.dir(): Selects an element by specifying the ID

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 access all elements of 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

It takes CSS selectors and returns the first element that matches that selector/group of selectors.

Question 12

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

Answer 12

It takes CSS selectors and returns a NodeList with a list of the document’s elements that match the specified group of selectors.

Question 13

What is the purpose of events and event handling?

Answer 13

Events can be selected for event handling to trigger code that responds to users.

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

Question 16

What is a callback function?

Answer 16

• A call back is when a function is passed into another function as an argument.
• A function that you don’t call but is called when an event occurs.
• ex) $hoverButton.addEventListener - when mouseover happens, the function handleMouseover fires

Question 17

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

Answer 17

The event object

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

• Can find more info on MDN
• A reference to the object where the event is occurring.//object that triggered the event
• Can be checked by console.log
• The element that the user interacts with

Question 19

What is the difference between these two snippets of code?

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

Answer 19

No ()= function only runs when event is fired.
- A callback function// The definition of the function
- When using an addEventListener, the function should always be a callback function

() = The function with no parameters. . Will run the function before the page finishes loading., instead of when the event occurs.

Question 20

What is the className property of element objects?

Answer 20

The class attribute of the object.

Question 21

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

Answer 21

Using the className property of the element object and assigning a value.

Question 22

What is the textContent property of element objects?

Answer 22

The text content of the node and its descendants.

Question 23

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

Answer 23

Using the textContent property of the object and assigning a value with an assignment operator.

Question 24

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

Answer 24

No

Question 25

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

Answer 25

More complicated

Question 26

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

Answer 26

It is easily retrievable and caching the elements allows for the browser to find it quicker

Question 27

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

Answer 27

No

Question 28

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

Answer 28

appendChild()

Question 29

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

Answer 29

A source attribute and the value.

Question 30

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

Answer 30

Create element, give it a class name (optional ) give it an attribute (optional) , give it text content ( optional) , query for an element already on page, append child.

Question 31

What is the textContent property of an element object for?

Answer 31

To assign text content to an element.

Question 32

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

Answer 32

className, set attribute to class and value of class name.

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 don’t need to manually do everything
• Ensures everything is consistent.

Question 34

What is the event.target?

Answer 34

• It retrieves the object from which an event was dispatched from
• The element that was interacted with

Question 35

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

Answer 35

The event travels down to the point of interaction (event bubbling)

Question 36

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

Answer 36

event.target.tagName

Question 37

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

Answer 37

• Event.target at the beginning and takes the css selector
• It will return the closest element it was nested in

Question 38

How can you remove an element from the DOM?

Answer 38

element.remove();

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

Add an event listener to the parent tag