LFZ DOM Quiz Flashcards
Why do we log things to the console?
For debugging purposes
What is a “model”?
a representation of something
Which “document” is being referred to in the phrase Document Object Model?
The HTML Document
Give two examples of document methods that retrieve a single element from the DOM.
getElementById, and querySelector
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName
Why might you want to assign the return value of a DOM query to a variable?
To cache the location of the element so that the browser doesn’t have to find the element all over again
Why might you want to assign the return value of a DOM query to a variable?
To cache the reference of the element so that the browser doesn’t have to find the element all over again
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
So that the browser can analyze all of the data in the HTML
What console method allows you to inspect the properties of a DOM element object?
console.dir
What does document.querySelectorAll() take as its argument and what does it return?
it takes in a css selector and returns a nodelist of all elements with the css class
What does document.querySelector() take as its argument and what does it return?
it takes in a css selector and returns the first element it finds that matches
Why do we log things to the console?
For debugging things
What is the purpose of events and event handling?
To listen for things like mouse click, key down, etc
What is the purpose of events and event handling?
To listen for things like mouse click, key down, etc and then do things
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 call back function is a function that takes in a function as an argument
What is a callback function?
A call back function is a function that takes in a function as an argument and runs it
What object is passed into an event listener callback when the event fires?
an event object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The target element of the event, you can check the documentation, or you can log the value to the console
What is the difference between these two snippets of code?
The first one is passing the function through
The second one is calling the function and running the code
What is the className property of element objects?
The class of the element
How do you update the CSS class attribute of an element using JavaScript?
by changing the className property
What is the textContent property of element objects?
the text content of the element. It excludes markup
How do you update the text within an element using JavaScript?
by changing the textContent property of the selected element
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?
Simpler
What is the event.target?
The target node of the event
Why is it possible to listen for events on one element that actually happen its descendent elements?
due to event bubbling. Clicking on a child element, also targets parent elements
What DOM element property tells you what type of element it is?
event.tagName
What does the element.closest() method take as its argument and what does it return?
It takes in a css selector and returns the closest parent that has that tag. Can return itself
How can you remove an element from the DOM?
with the remove method
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?
By putting the event listener on a parent container, and appending the new element as a child to that parent
