DOM

Question 1

Dom Querying
Why do we log things to the console?

Answer 1

to make sure the script is loading properly, to check for bugs, make sure everything is working smoothly

Question 2

Dom Querying
What is a ‘model’?

Answer 2

something recreating (representing) something else

Question 3

Dom Querying
Which ‘document’ is being referred to in the phrase Document Object Model?

Answer 3

html

Question 4

Dom Querying
What is the word ‘object’ referring to in the phrase Document Object Model?

Answer 4

it’s referring to different parts of the page loaded in the browser window

Question 5

Dom Querying
What is a DOM Tree?

Answer 5

an element and all of its configurations

Question 6

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

Answer 6

getElementById(‘id’)
querySelector(‘css selector’)

Question 7

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

Answer 7

querySelectorAll(‘css selector’)

Question 8

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

Answer 8

make it easier to use, otherwise you have to write it out every time

Question 9

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

Answer 9

console.dir()

Question 10

Dom Querying
Why would a

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

Answer 10

because the browser needs to parse all the elements in the HTML page before Javascript code can access them

Question 11

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

Answer 11

a string containing one or more css selectors
returns: first element that matches the specified selector or group of selectors

Question 12

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

Answer 12

a string containing one or more selectors
returns a static (not live) nodelist containing one element object for each element that matches at least one of the specified selectors or an empty nodelist (not an array) if there isn’t a match

Question 13

DOM Events:
Why do we log things to the console?

Answer 13

for this exercise, it was to see when the event fires
for debugging
make sure that script is loading properly

Question 14

DOM Events:
What is the purpose of events and event handling?

Answer 14

so that users can interact with the web page

Question 15

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

Answer 15

no

Question 16

DOM Events:
What method of element objects let you set up a function to be called when a specific type of event occurs?

Answer 16

.addEventListener()

Question 17

DOM Events:
what is a callback function?

Answer 17

it is a function that is passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action

Question 18

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

Answer 18

the event object
(it contains information about the event like event type, target element, and the time the event occurred)

Question 19

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

Answer 19

the element where the event occurred
you can console.log if you’re not sure
mdn for more info

Question 20

DOM Events:
what is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())

Answer 20

the first is being passed as a callback function
second gets called immediately and doesn’t get to be an event handler, gets replaced by its return

Question 21

DOM Manipulation:
What is the className property of element objects?

Answer 21

it gets and sets the value of a specific class attribute of a specific element
element.className = ‘attribute’

Question 22

DOM Manipulation:
how do you update the CSS class attribute of an element using JavaScript?

Answer 22

element.className = ‘classNames’

Question 23

DOM Manipulation:
What is the textContent property of element objects?

Answer 23

allows you to update text content

Question 24

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

Answer 24

node.textContent = ‘text content’

Question 25

DOM Manipulation:
Is the event parameter of an event listener callback always useful?

Answer 25

no

Question 26

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

Answer 26

more complicated

Question 27

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

Answer 27

so that you can access and change the information easily?

Question 28

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

Answer 28

no

Question 29

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

Answer 29

.appendChild()
parentElement.appendChild(childElement)

Question 30

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

Answer 30

name of attribute
value you want to assign to that attribute

Question 31

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

Answer 31

1. create the element, use .createElement()
   var newEl = document.createElement(‘element’)
   2a. give it content, use .createTextNode() or .textContent to give it text
   - var name = document.createTextNode(‘text content’)
   - newEl.textContent = variable or ‘textContent’
   2b. and/or .setAttribute() to give it an attribute and attribute value
   newEl.setAttribute(‘attributeName’, ‘attributeValue’)
2. add it to the DOM, use .appendChild()
   variableForParentElement.appendChild(varForChildElement)

Question 32

DOM Creation:
What is the textContent property of an element object for?

Answer 32

it represents the text content of the element (node)
- use it to assign new textContent to an element

Question 33

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

Answer 33

Element.setAttribute(‘name’, ‘value’)
element.className = ‘value’

Question 34

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

Answer 34

you can use it again in the future
you don’t have to type everything out again when you’re trying to create something

Question 35

DOM Event Delegation:
What is the event.target?

Answer 35

it is the element the event interacted with

Question 36

DOM Event Delegation:
Why is is possible to listen for events on one element that actually happen on its descendent elements?

Answer 36

because of bubbling

Question 37

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

Answer 37

event.target

tagName property?

Question 38

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

Answer 38

it takes a CSS selector
and returns the closest ancestor (parent) element, itself, or null
(opposite of querySelector)

Question 39

DOM Event Delegation:
How can you remove an element from the DOM?

Answer 39

the remove() method
element.remove()
takes no arguments

Question 40

DOM Event Delegation:
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 40

add the event listener to the parent element