DOM

Question 1

What is a “model”?

Answer 1

A visual representation

Question 2

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

Answer 2

the HTML doc

Question 3

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

Answer 3

a JavaScript Object

Question 4

What is a DOM Tree?

Answer 4

An element plus all its content and its configuration

Question 5

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

Answer 5

getElementById() and preferably querySelector()

Question 6

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

Answer 6

querySelectorAll()

Question 7

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

Answer 7

So you don’t need to keep looking it upon each reuse

Question 8

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

Answer 8

console.dir()

Question 9

Why would a

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

Answer 9

So it loads every element first before it loads up the javascript

Question 9

Why would a

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

Answer 9

So it loads every element first before it loads up the javascript

Question 10

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

Answer 10

Takes CSS syntax as a string, returns the first element that it finds matching that selector

Question 11

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

Answer 11

It takes a string and brings back a nodeList

Question 12

What is the purpose of events and event handling?

Answer 12

To make the document behave with interactions

Question 13

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

Answer 13

no

Question 14

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

Answer 14

addEventListener

Question 15

What is a callback function?

Answer 15

taking a function definition and passing it around

Question 16

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

Answer 16

data about the event that occurred

Question 17

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

Answer 17

A property that holds the element where the event originated from

Question 17

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

Answer 17

A property that holds the element where the event originated from

Question 18

What is the className property of element objects?

Answer 18

spaces separating class names

Question 19

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

Answer 19

string with classes separated by spaces

Question 20

What is the textContent property of element objects?

Answer 20

represents all the text of element and its children

Question 21

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

Answer 21

element name.textContent(‘string’)

Question 22

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

Answer 22

sometimes no

Question 23

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

Answer 23

No

Question 24

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

Answer 24

appendChild

Question 25

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

Answer 25

name of the attribute, and the value

Question 26

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

Answer 26

createElement, store in var, call query selector for the element to appendChild

Question 27

What is the textContent property of an element object for?

Answer 27

set or get text value of element

Question 28

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

Answer 28

setAttribue(), className

Question 29

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

Answer 29

reusability, and naming a process

Question 29

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

Answer 29

reusability, and naming a process

Question 30

What is the event.target?

Answer 30

where the event occurred

Question 31

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

Answer 31

bubbling

Question 32

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

Answer 32

tag name property in ALL CAPS

Question 33

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

Answer 33

takes a css selector and returns the first element it finds in its tree

Question 34

How can you remove an element from the DOM?

Answer 34

remove() method

Question 35

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 35

Listening to a parent element

Question 36

What is the event.target?

Answer 36

where the event happened from

Question 37

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

Answer 37

takes a string of a css selector, returns a boolean of if the element has that selector

Question 38

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

Answer 38

getAttribute()

Question 39

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?

Answer 39

individual event listener for each tab