DOM Flashcards
Why do we log things to the console?
to check the output of your coding to see if it is working correctly
What is a “model”?
copy of the structure of an html document.
Which “document” is being referred to in the phrase Document Object Model?
the html page.
What is the word “object” referring to in the phrase Document Object Model?
javascript object.
What is a DOM Tree?
Data representation of all elements and its child elements.
Give two examples ofdocumentmethods that retrieve a single element from the DOM.
getelementbyid and query selector.
Give one example of a document method that retrieves multiple elements from the DOM at once.
queryselectorall
Why might you want to assign the return value of a DOM query to a variable?
so that you can easily access that DOM variable. Reuse it.
What console method allows you to inspect the properties of a DOM element object?
console.dir
Why would the script tag need to be placed at the bottom of the HTML content instead of at the top?
so that body contents of html can load first.
What does queryselector take as its argument and what does it return?
string of css selector, first of the matching elements.
What does queryselectorall take as its argument and what does it return?
string of css selector, returns all of the elements that match.
What is the purpose of events and event handling?
events occur based on user interaction. Event handling are steps that lead to the trigger.
are all possible parameters required to use a JavaScript method or function?
no
What method of element objects lets you set up a function to be called when a specific type of event occurs?
add event listener
What is a callback function?
a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
What object is passed into an event listener callback when the event fires?
event object with a report on a specific event for you to work with.
what is event.target? If you werent sure, how would you check? Where could you get more information about it?
a reference to the object onto which the event was dispatched. MDN
What is the className property of element objects?
used to update classname attribute.
How do you update the CSS class attribute of an element using JavaScript?
Using className property
What is textContent properly of element objects?
add or update text.
How do you update the text within an element using JavaScript?
use text content property
is the event parameter of an event listener callback always useful?
no
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
Why is storing information about a program in variables better than only storing it in the DOM?
can make website load faster. Easier to maintain your code.
What is event.target?
contains helpful data about the event, such as which element the event happened on.
Why is it possible to listen for events on one element that actually happen its descendent elements?
Bubble up to the parent elements. Event is carried forward to each ancestor chain.
What DOM element property tells you what type of element it is?
tagName, nodeName.
what does the closest method take as its argument and what does it return?
String of css selector, returns Dom that matches that selector.
How can you remove an element from the DOM?
- remove() on the Dom element you want to remove.
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?
you would add it to the parent element that retains all of the originating elements.
