Dom Flashcards
Why do we log things to the console?
To debug
What is a “model”?
In this case, it’s the DOM tree displayed in a pattern or representation
Which “document” is being referred to in the phrase Document Object Model?
HTML
What is the “object” referring to in the phrase Document Object Model?
data type
Give two examples of document methods that retrieve a single element from the DOM?
getElementbyId(‘id’) and querySelector(‘css selector’)
Give one example of a document method that retrieves multiple elements from DOM at once.
querySelectorAll(‘css selector’)
Why might you want to assign the return value of a DOM query to a variable?
easier find and access
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 of the HTML page before the Javascript code can access them. Simply because HTML needs to load before the script.
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.
What does document.quertySelectorAll() take as its argument and what does it return?
Uses a CSS selector syntax to select one or more elements and returns all of those that match (returns a node list)
What is a DOM Tree?
model for a family tree containing its attributes and values as well
What is the purpose of events and event handling?
So that we get a reaction and execute it
Are all possible parameters required to use a JavaScript method or function?
JavaScript function definitions do not specify data types for parameters. JavaScript functions do not perform type checking on the passed arguments. JavaScript functions do not check the number of arguments received.
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?
gets called back into calling scope
What is the event.target? if you weren’t sure, how would you check? Where could you get more information about it.
target is where the event happens, console.log to check
What is the className property of element objects?
dom method used to apply the className to a element object
How do you update the CSS class attribute of an element using JS?
assign a new value to the property,
what is the textContent property of element objects?
allows to manipulate text context, text.content property can also allow you to view the contents of the text.content property
How do you update the text within an element using JavaScript?
assigned a new value
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?
harder, variables help organize and easier to debug/call
Why is storing information about a program in variables better than only storing it in the DOM?
easier to access or find
Does the document.createElement() method insert a new element into the page?
no, it still needs to be added into the DOM tree
How do you add an element as as child to another element?
appendChild
What do you pass as the arguments to the element.setAttribute() method?
name of attribute , value
What steps do you need to take in order to insert a new elements into the page?
document.createElement() and appendChild()
What is the textContent property of an element object for?
to add textContent
Name two ways to set the class attribute of a DOM element?
className property, setAttribute
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
ready made tool to re-use to add things in, much easier to test
What is the event.target?
event where element occurs
Why is it possible to listen for events on one element that actually happens its descendent elements?
bubbling
What is 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?
traverses the Element and its parents (heading toward the document root) until it finds a node that matches the provided selector string. Will return itself or the matching ancestor
How can you remove an element from the DOM?
.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?
attach them to parent
What is the affect of setting an element to display: none;?
hides element from viewport and makes it take no space
What does the element.matches() method take as an argument and what does it return?
takes the string of a css selector and returns a boolean
How can you retrieve the value of an element’s attribute?
getAttribute()
At what steps of the solution would it be helpful to log things to the console?
when you need to evaluate a value, every step is shown
If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JS code be written instead?
you would have to type everything out and not be able to reuse
If you didn’t use a loop to conditionally show or hide the views in the page, how would you JS code be written instead?
a huge chunk of if-else statements
What is the event.target?
holds the target that triggers the event
