DOM Flashcards
Why do we log things to the console?
our investigative mechanism, communicate with the computer and get information about it
What is a “model”?
a representation of how something may look
Which “document” is being referred to in the phrase Document Object Model?
the html document
What is the word “object” referring to in the phrase Document Object Model?
JavaScript Object
What is a DOM Tree?
an element plus all of it’s content and it’s configuration, plus it’s children and their content/configurations
Give two examples of document methods that retrieve a single element from the DOM.
document.querySelector & document.getElementById
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll
Why might you want to assign the return value of a DOM query to a variable?
so that you can access it again easily
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 it needs to parse the entire document first, which means loading all the html elements. The entire content of the html document needs to be created before you can do anything with it.
What does document.querySelector() take as its argument and what does it return?
takes a css selector as a string, and the return value is the first element that javascript finds in the document that matches the css selector you passed through. return is object.
What does document.querySelectorAll() take as its argument and what does it return?
takes a string as it’s argument and returns a nodelist which is an array-like object but isn’t necessarily an array. return is a nodelist, which is still one object.
Why do we log things to the console?
for debugging, investigative mechanism
What is the purpose of events and event handling?
the purpose is to prepare for a possible action the user can take and do something in response. When this happens, do this thing.
Gives the page interactivity
Are all possible parameters required to use a JavaScript method or function?
Not necessary at all times, there are optional parameters
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 function that’s being passed into another function as an argument
What object is passed into an event listener callback when the event fires?
the event object, which is a bunch of information about what happened, on what it happened.
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
A property that holds the element where the event originated from. To be sure what it is then you can: console.log(event.target);
the property that’s being selected by query can be different from the event.target - as that one tells you where it originated from. So it could be from an element within the element you’ve selected using queryselector. (remember bubbling)
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
the first is passing the handleClick function as a callback, whereas the second one is calling it right there and then - which doesn’t work.
What is the className property of element objects?
the className property holds the value of the classname attribute of an html element
How do you update the CSS class attribute of an element using JavaScript?
object.className = // it would be a string and any number of classes separated by spaces e.g. “blue-text underline”
What is the textContent property of element objects?
its a property that allows you to see or change the text content of an element e.g. element.textContent = “blah blah”
How do you update the text within an element using JavaScript?
element.textContent = // new text content as a string
Is the event parameter of an event listener callback always useful?
most often yes, but 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?
more complicated, it would create a lot more steps for you to accomplish the same thing
Why is storing information about a program in variables better than only storing it in the DOM?
allows you to easily access it again later on, by keeping your data in javascript you’re also allowing yourself to have your data in javascript language rather than in other languages.
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?
prevents the event from doing what it would normally do, its default behavior.
What does submitting a form without event.preventDefault() do?
does the default actions, in terms of form submittal it would reload the whole page if you left out the preventDefault method.
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 ($theForm.elements.email.value)
What is one risk of writing a lot of code without checking to see if it works so far?
you could be writing a lot of bugs
What is an advantage of having your console open when writing a JavaScript program?
to catch a bug, error, etc.
Does the document.createElement() method insert a new element into the page?
no, you still need to appendchild
How do you add an element as a child to another element?
parent.appendchild(child)
What do you pass as the arguments to the element.setAttribute() method?
setAttribute (‘type of attribute’, ‘attribute-value’)
What steps do you need to take in order to insert a new element into the page?
create the element and assign it to a variable, querySelect the parent and store it in a variable, add any attributes, add text content, append child to parent
What is the textContent property of an element object for?
to add text to an element
Name two ways to set the class attribute of a DOM element.
.setAttribute, .className
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
so that you can use it multiple times, and the names of the functions help you figure out what you’re doing in that part of code.
What is the event.target?
holds the element where the event occurred, or originated
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?
event.target.tagName // value is the string of the name of the element and its all caps e.g. BUTTON LI DIV
What does the element.closest() method take as its argument and what does it return?
takes a css-selector and returns the first ancestor with that class name it finds
How can you remove an element from the DOM?
.remove(); for example: $variable.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?
put the eventlistener at the most immediate parent, then you can use a condition to check for that element and do the actions you would like it to if the condition evaluates to true. this takes advantage of bubbling.
What is the affect of setting an element to display: none?
it gets removed from the page or the document flow
What does the element.matches() method take as an argument and what does it return?
it takes a string of the css-selector as the parameter, and it returns a Boolean
How can you retrieve the value of an element’s attribute?
$element.getAttribute(‘attribute type’)
At what steps of the solution would it be helpful to log things to the console?
every 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?
you would need to create an addEventListener for 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?
you would have to create a conditional block for each possible view
