JavaScript DOM Flashcards
What event is fired when a user places their cursor in a form control?
focus
What event is fired when a user’s cursor leaves a form control?
blur
What event is fired as a user changes the value of a form control?
input
What event is fired when a user clicks “submit” button within a <form>?
submit
What does the event.preventDefault() method do?
Prevents the page from automatically reloading after the form has been submitted and every events default behavior
What does submitting a form without event.preventDefault() do?
Reload the page and the form
What property of a form element object contains all of the form’s controls.
.elements
What property of a form control object gets and sets its value?
.value
What is one risk of writing a lot of code without checking to see if it works so far?
Makes it harder to debug
What is an advantage of having your console open when writing a JavaScript program?
You get to keep track of everything
Does the document.createElement() method insert a new element into the page?
NO
How do you add an element as a child to another element?
appendChild()
What do you pass as the arguments to the element.setAttribute() method?
The attribute followed by the attribute value
What steps do you need to take in order to insert a new element into the page?
createElement()
createTextNode()
appendChild()
What steps do you need to take in order to insert a new element into the page?
createElement()
appendChild()
What is the textContent property of an element object for?
To change the text content of an element or add
Name two ways to set the class attribute of a DOM element.
element.setAttribute()
element.className()
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
Reusability
What is the event.target?
It’s a reference to whatever object it interacted with
Why is it possible to listen for events on one element that actually its descendent elements?
Event Bubbling
What DOM property tells you what type of element it is?
event.target.tagName
What does the element.closest() method take as its argument and what does it return?
Takes a class name as an argument and returns the closest element to the method’s element with the argument class name
How can you remove an element from the DOM?
With the element.remove() method
If you wanted to insert a new clickable DOM element into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
By appending that new element to a parent element that already has an event listener to it
What is the event.target?
A reference to the object onto the event being fired
What is the affect of setting an element to display: none?
It’ll be removed from the page
What does the element.matches() method take as an argument and what does it return?
It takes a selector as the argument and returns either true or false if that selector matches the element
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?
On all steps
If you were to add another tab and view to your HTML, but you didn’t use even delegation, how would your JavaScript code be written instead?
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?
