DOM Flashcards
why do we log things to the console?
during development, keep track of results
check functionality and data verification
what is a “model?”
a system or thing used as an example to follow or imitate
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?
JavaScript objects
what is a DOM tree?
a model of a web page consisting of all elements and their nodes
give two examples of document methods that retrieve a single element from the DOM
getElementbyID(‘id’)
querySelector(‘css selector’)
give one example of a document method that retrieves multiple elements from the DOM at once
querySelectorAll(‘css selector’)
why might you want to assign the return value of a DOM query to a variable?
variable stores a reference to the object in the dom tree
what console method allows you to inspect the properties of a DOM element object?
console.dir()
why would a < script > tag need to be placed at the bottom of the HTML content instead of at the top?
browser needs to parse all of the elements in the HTML before javascript code can access them
what does document.querySelector() take as its argument and what does it return
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
what does document.querySelectorAll() take as its argument and what does it return?
takes CSS selector as argument
rreturns a static NodeList representing a list of the document’s elements that match the specified group of selectors
why do we log things to the console?
keep track of data
functionality
data verification
what is the purpose of events and event handling?
keep track of how the user interacts with the web page
what do [] square brackets mean in function and method syntax documentation?
brackets are optional arguments
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 function to be used at some point in the future
what object is passed into an event listener callback when the event fires?
event object
what is the event.target? if you weren’t sure, how would you check? where could you get more information about it?
target property of the event is a reference to the object/element onto which the event was dispatched
check MDN
what is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
element.addEventListener(‘click’, handleClick)
code will not run until the vent fires
element.addEventListener(‘click’, handleClick())
code will run immediately as page loads
what is the className property of element objects?
gets and sets the value of the class attribute of the specified element
how do you update the CSS class attribute of an element using JS?
elemetNodeReference.className = cName;
what is the textContent Property of element objects?
represents the text content of the node and its descendants
how do you update the text within an element using JS?
someNode.textContent = string;
is the event parameter of an event listener callback always useful?
no, it doens’t always make use of the event target
would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
more complicated since variables are easier to access
why is storing information about a program in variables better than only storing it in the DOM?
variables are easier to keep track of as the DOM can provide a lot of extra information
does the document.createElement() method insert a new element into the page?
no, it only creates the element node
how do you add an element as a child to another element?
element.appendChild()
what do you pass as the arguments to the element.setAttribute() method?
.setAttribute(name, value)
what steps do you need to take in order to insert a new eelement into the page?
createElement()
creatTextNode()/setAttribute()
appendChild()
what is the textContent property of an element object for?
property of the nod interface represents the text content of the node and tis descendants
get/set textContent
name two ways to set the class attribute of a DOM element
.setAttribute(‘class’, ‘className’)
element.className = ‘cName’
what are two advantages of defining a function to do create something (like the work of creating a DOM tree?)
reuability
save time
what is the event.target?
reference to the object onto which the event fired
why is it possible to listen for events on one element that actually happens its descendent elements?
event bubbling - starts at the most specific node and flows outward to the least specific one
what DOM element property tells you what type of element it is?
.tagName property
what does the element.closest() method take as its argument and what does it return?
takes CSS selector as argument and returns closest ancestor of the selected element
how can you remove an element from the DOM?
node.remove() method
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?
dom-event-delgation
add a click event listener to the parent element and ensure the target is what you actually want to reference