DOM Javascript Flashcards
What is the purpose of events and event handling?
events check for events that happen and event handling fires it
What do [] square brackets mean in function and method syntax documentation?
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?
function that gets put into another function as argument and runs
What object is passed into an event listener callback when the event fires?
event object which has properties that tell us it’s current status or data
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
Which “document” is being referred to in the phrase Document Object Model?
HTML document and elements
Give two examples of document methods that retrieve a single element from the DOM.
querySelector and getElementByID
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 we can reuse it later
What console method allows you to inspect the properties of a DOM element object?
console.dir
What does document.querySelector() take as its argument and what does it return?
css selector in string notation
What is the className property of element objects?
it returns name of class
How do you update the CSS class attribute of an element using JavaScript?
use .className
What is the textContent property of element objects?
it returns the content of text
How do you update the text within an element using JavaScript?
textContent, innerHTML and innerText
Is the event parameter of an event listener callback always useful?
not necessarily
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?
because we can use it when we want to
Does the document.createElement() method insert a new element into the page?
No, not until it is appended to existing element on html document
How do you add an element as a child to another element?
parentElement.appendChild()
What do you pass as the arguments to the element.setAttribute() method?
class then className
What steps do you need to take in order to insert a new element into the page?
Append created element to existing element on HTML page
What is the textContent property of an element object for?
Used to get or alter the textContent of the element
Name two ways to set the class attribute of a DOM element.
setAttribute or manually
What are two advantages of defining a function to do something (like the work of creating a DOM tree)?
Efficiency and consistency
What is the event.target?
element that is currently interacting with the event fired
What is the affect of setting an element to display: none?
element will not be displayed and will be removed from the flow of the document
What does the element.matches() method take as an argument and what does it return?
css selector and returns boolean true if matched
How can you retrieve the value of an element’s attribute?
getAttribute method
At what steps of the solution would it be helpful to log things to the console?
Every necessary step
If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?
It would look alot longer
If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?
It would look alot longer
Why is it possible to listen for events on one element that actually happen on its descendent elements?
because of bubbling. The ancestor contains the descendants.
What DOM element property tells you what type of element it is?
tagName
What does the element.closest() method take as its argument and what does it return?
css selector and returns the closest matching element.
How can you remove an element from the DOM?
element.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?
use event-delegation
