DOM Flashcards
Why do we log things to the console?
to verify code and get information about code
What is a “model”?
representation of something
Which “document” is being referred to in the phrase Document Object Model?
html document
What is the word “object” referring to in the phrase Document Object Model?
data type
What is a DOM Tree?
element + content and configuration
Give two examples of document methods that retrieve a single element from the DOM.
getElementByID or querySelector
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName, getElementsByTagName, querySelectorAll
Why might you want to assign the return value of a DOM query to a variable?
to reuse in the future (stores location of DOM)
What console method allows you to inspect the properties of a DOM element object?
console.dir
Why would a
tag need to be placed at the bottom of the HTML content instead of at the top?
load the content of all the elements, documents load from top to bottom
What does document.querySelector() take as its argument and what does it return?
css selector syntax (string), returns only the first element that matches
What does document.querySelectorAll() take as its argument and what does it return?
css selector (string), returns NodeList
What is the purpose of events and event handling?
when an event “fires” , it can be used to trigger a particular function or code
Are all possible parameters required to use a JavaScript method or function?
no, not all parameters are required
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
What is a callback function?
A callback function is a function passed into another function as an argument
passing the definition of the function, not the return
What object is passed into an event listener callback when the event fires?
event object that has data about the event that occured
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
event.target is the target element being used / originated from
console.log(event.target)
MDN
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
first code is using the handleClick function while the second code is calling the function