DOM Flashcards
Why do we log things to the console?
to debug / check
What is a “model”?
As a browser loads a web page, it creates a model of that page.
Which “document” is being referred to in the phrase Document Object Model?
it represents the entire HTML page (and also corresponds to
the document object)
What is the word “object” referring to in the phrase Document Object Model?
data type object in Javascript
What is a DOM Tree?
every element/content/configuration on your page is represented in the DOM tree
Give two examples of document methods that retrieve a single element from the DOM.
get ElementByld () don’t use
querySelector ()
use
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName() don’t use
getElementsByTagName() don’t use
querySelectorAll() use
Why might you want to assign the return value of a DOM query to a variable?
if your script needs to use the same element(s) more than once
What console method allows you to inspect the properties of a DOM element object?
console.dir()
Why would a
tag need to be placed at the bottom of the HTML content instead of at the top?
The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.
What does document.querySelector() take as its argument and what does it return?
Uses CSS selector syntax that would select one or more elements .
This method returns only the first of the matching elements.
querySelector(‘li.hot’)
What does document.querySelectorAll() take as its argument and what does it return?
Uses CSS selector syntax to select one or more elements and returns all (node list) of those that match.
querySelectorAll(‘li.hot’)
What is the purpose of events and event handling?
When you browse the web, your browser registers different
types of events. It’s the browser’s way of saying, “Hey, this
just happened.” Your script can then respond to these events.
Are all possible parameters required to use a JavaScript method or function?
checkUsername (} function. Note that the parentheses are omitted
where the function is called because they would indicate that
the function should run as the page loads (rather than when the
event fires)
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?
passing function as a value typically to another function
What object is passed into an event listener callback when the event fires?
object with a huge set of properties explaining what just occurred
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
element where the event occurred
check it in console.log or mdn
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
top: passes function correctly
bottom: calling function immediately and returning event value
What is the className property of element objects?
The className property of the Element interface 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 JavaScript?
element/variable.className = ‘value’
variable = document.querySelector
What is the textContent property of element objects?
The textContent property of the Node interface represents the text content of the node and its descendants.
How do you update the text within an element using JavaScript?
element/variable.textContent = ‘value’
variable = document.querySelector
Is the event parameter of an event listener callback always useful?
no (90% needed, just not always)
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
complicated
Why is storing information about a program in variables better than only storing it in the DOM?
we can keep using it
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 the “submit” button within a <form>?
submit
What does the event.preventDefault() method do?
prevent default behavior
What does submitting a form without event.preventDefault() do?
the browser will automatically reloading the page with the form’s values in the URL.
**event handler for submit even MUST HAVE event.preventDefault()
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 property
What is one risk of writing a lot of code without checking to see if it works so far?
avoid big scale investigations to see what’s wrong
What is an advantage of having your console open when writing a JavaScript program?
check each step
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?
name, value
What steps do you need to take in order to insert a new element into the page?
-create element
-text content(optional)
-query for parent element
-append
What is the textContent property of an element object for?
set/get the text value
Name two ways to set the class attribute of a DOM element.
classList.add() + setAttribute() +
className
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
can reuse/recycle function
What is the event.target?
element interacted with
Why is it possible to listen for events on one element that actually happen its descendent elements?
bubbling
What DOM element property tells you what type of element it is?
tagName property (uppercase) - use for elements
nodeName - can target documents and other big shit
What does the element.closest() method take as its argument and what does it return?
contains css selector for argument
return closest upward ancestor/parent 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?
add it to the parent (called event-delegation)
What is the affect of setting an element to display: none?
hides the element
What does the element.matches() method take as an argument and what does it return?
element / boolean (whether it matches the selector selected)
How can you retrieve the value of an element’s attribute?
element.getAttribute()
At what steps of the solution would it be helpful to log things to the console?
each 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?
must have an individual conditional / event handler for each view
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?
have to write conditionals for each view
