dom Flashcards
Why do we log things to the console?
to check for bugs and to see what things are
What is a “model”?
representation of something else
Which “document” is being referred to in the phrase Document Object Model?
the document node at the top of the tree
What is the word “object” referring to in the phrase Document Object Model?
each node is an object with methods and properties
What is a DOM Tree?
A diagram showing parent to child and sibling relations between nodes.
Give two examples of document methods that retrieve a single element from the DOM.
.querySelector() and .geElementById()
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?
so you don’t have to type the method out everytime to get the same DOM query
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?
because the HTML content needs to be written before it can be called by the domquery.
What does document.querySelector() take as its argument and what does it return?
it takes a selector and returns the first element int he document that matches the specified selector
What does document.querySelectorAll() take as its argument and what does it return?
it returns a nodelist that matches a group of selectors.
Why do we log things to the console?
to see what’s happening and know where we are
What is the purpose of events and event handling?
execute code when an event occurs- have user interaction
Are all possible parameters required to use a JavaScript method or function?
no
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 is passed into another function as an argument which is then invoked inside the outer function to complete an action
What object is passed into an event listener callback when the event fires?
the event
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
target property of the event object- holds element that was interacted with, console log event.target
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
handleclick() will run and what is returned is passed as the argument.
handleclick does not return and just runs when the click event happens
What is the className property of element objects?
it is the class attribute of the element.
How do you update the CSS class attribute of an element using JavaScript?
document.queryselector().className =
What is the textContent property of element objects?
shows the textcontent of the element
How do you update the text within an element using JavaScript?
document.queryselector().textcontent =
Is the event parameter of an event listener callback always useful?
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?
can call the variable at multiple locations and uses
What does the transform property do?
lets you rotate, scale, skew, or translate an element
Give four examples of CSS transform functions.
rotate, scale, skew, trasnlate
The transition property is shorthand for which four CSS properties?
transition-delay
transition-duration
transition-property
transition-timing-function
What event is fired when a user places their cursor in a form control?
focus event
What event is fired when a user’s cursor leaves a form control?
blur event
What event is fired as a user changes the value of a form control?
input event
What event is fired when a user clicks the “submit” button within a ?
submit event
What does the event.preventDefault() method do?
prevents the default action from taking place if the event is not explicitly handled
What does submitting a form without event.preventDefault() do?
resets the page
What property of a form element object contains all of the form’s controls.
elements property
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?
will have a difficult time seeing where the code went wrong if it doesn’t work
What is an advantage of having your console open when writing a JavaScript program?
can see what is happening and see errors if they occur
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?
append.child
What do you pass as the arguments to the element.setAttribute() method?
(attribute, value)
What steps do you need to take in order to insert a new element into the page?
make the element, append textnode into it if it has text, append the element to parent element on the page
What is the textContent property of an element object for?
to point to the textContent of the element
Name two ways to set the class attribute of a DOM element.
element.className =
setattribute(class, classname)
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
can call multiple times to create multiple trees for different data
can have page interactions to call the function
What is the event.target?
target property of the event. the object onto which the event occured. element that started the event
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
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?
a selector. returns closest matching element
How can you remove an element from the DOM?
.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?
create a container for them that has the event listener and filters for the element nodeNames or tags
What is the event.target?
target property of the event. the object onto which the event occured. element that started the event
What is the affect of setting an element to display: none?
it is hidden. removed from page
What does the element.matches() method take as an argument and what does it return?
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?
Any step that something is assigned or produces a value
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?
Would have to add an eventlistener to each tab
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?
would have to hard code each tab[i] to check if it matched e.target and then hard code the addition or removal of classes
What is a breakpoint in responsive Web design?
The points at which a media query is introduced are known as breakpoints.
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?
useful for different screen sizes
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?
css cascading overrides with the latest introduced css ruleset
What is JSON?
javascript object notation
What are serialization and deserialization?
Serialization is the process of turning an object in memory into a stream of bytes so you can do stuff like store it on disk or send it over the network.
Why are serialization and deserialization useful?
can store objects and send them
How do you serialize a data structure into a JSON string using JavaScript?
stringify
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse
How to you store data in localStorage?
localStorage.setitem()
How to you retrieve data from localStorage?
localStorage.getitem()
What data type can localStorage save in the browser?
JSON,
When does the ‘beforeunload’ event fire on the window object?
before the window, document, and its resources unload
