DOM

Question 1

why do we log things to the console?

Answer 1

during development, keep track of results

check functionality and data verification

Question 2

what is a “model?”

Answer 2

a system or thing used as an example to follow or imitate

Question 3

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

Answer 3

HTML Document

Question 4

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

Answer 4

JavaScript objects

Question 5

what is a DOM tree?

Answer 5

a model of a web page consisting of all elements and their nodes

Question 6

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

Answer 6

getElementbyID(‘id’)

querySelector(‘css selector’)

Question 7

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

Answer 7

querySelectorAll(‘css selector’)

Question 8

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

Answer 8

variable stores a reference to the object in the dom tree

Question 9

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

Answer 9

console.dir()

Question 10

why would a < script > tag need to be placed at the bottom of the HTML content instead of at the top?

Answer 10

browser needs to parse all of the elements in the HTML before javascript code can access them

Question 11

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

Answer 11

takes elements within the document that matches the specified selector, or gorup of selectors

returns an HTMLelement object representing the first element in the document that matches the CSS seleector, or null is returned if there is no match

Question 12

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

Answer 12

takes CSS selector as argument

rreturns a static NodeList representing a list of the document’s elements that match the specified group of selectors

Question 13

why do we log things to the console?

Answer 13

keep track of data
functionality
data verification

Question 14

what is the purpose of events and event handling?

Answer 14

keep track of how the user interacts with the web page

Question 15

what do [] square brackets mean in function and method syntax documentation?

Answer 15

brackets are optional arguments

Question 16

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

Answer 16

addEventListener()

Question 17

what is a callback function?

Answer 17

a function to be used at some point in the future

Question 18

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

Answer 18

event object

Question 19

what is the event.target? if you weren’t sure, how would you check? where could you get more information about it?

Answer 19

target property of the event is a reference to the object/element onto which the event was dispatched

check MDN

Question 20

what is the difference between these two snippets of code?

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

Answer 20

element.addEventListener(‘click’, handleClick)

code will not run until the vent fires

element.addEventListener(‘click’, handleClick())
code will run immediately as page loads

Question 21

what is the className property of element objects?

Answer 21

gets and sets the value of the class attribute of the specified element

Question 22

how do you update the CSS class attribute of an element using JS?

Answer 22

elemetNodeReference.className = cName;

Question 23

what is the textContent Property of element objects?

Answer 23

represents the text content of the node and its descendants

Question 24

how do you update the text within an element using JS?

Answer 24

someNode.textContent = string;

Question 25

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

Answer 25

no, it doens’t always make use of the event target

Question 26

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 since variables are easier to access

Question 27

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

Answer 27

variables are easier to keep track of as the DOM can provide a lot of extra information

Question 28

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

Answer 28

no, it only creates the element node

Question 29

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

Answer 29

element.appendChild()

Question 30

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

Answer 30

.setAttribute(name, value)

Question 31

what steps do you need to take in order to insert a new eelement into the page?

Answer 31

createElement()
creatTextNode()/setAttribute()
appendChild()

Question 32

what is the textContent property of an element object for?

Answer 32

property of the nod interface represents the text content of the node and tis descendants

get/set textContent

Question 33

name two ways to set the class attribute of a DOM element

Answer 33

.setAttribute(‘class’, ‘className’)

element.className = ‘cName’

Question 34

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

Answer 34

reuability

save time

Question 35

what is the event.target?

Answer 35

reference to the object onto which the event fired

Question 36

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

Answer 36

event bubbling - starts at the most specific node and flows outward to the least specific one

Question 37

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

Answer 37

.tagName property

Question 38

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

Answer 38

takes CSS selector as argument and returns closest ancestor of the selected element

Question 39

how can you remove an element from the DOM?

Answer 39

node.remove() method

Question 40

if you wanted to insert new clickable DOM elements into the page using JS, how could you avoid adding an event listener to every new element individually?

Answer 40

dom-event-delgation

add a click event listener to the parent element and ensure the target is what you actually want to reference