Document Object Model Flashcards
Why do we log things to the console?
to trouble shoot
What is a “model”?
a replica of the original
Which “document” is being referred to in the phrase Document Object Model?
the whole html document
What is the word “object” referring to in the phrase Document Object Model?
a collection of a whole bunch of objects from js
What is a DOM Tree?
a model of a web page made of objects
Give two examples of document methods that retrieve a single element from the DOM.
document.queryselector() and getelementbyid
Why might you want to assign the return value of a DOM query to a variable?
because you need to save the elements in variables in order to use dir on them. Or, you have to pass the call to querySelector to the dir method. And because once we select that object we have it saved already in that variable, so if we need to acces it again we can just use the variable instead of having to use the dom again
Why might you want to assign the return value of a DOM query to a variable?
because you need to save the elements in variables in order to use dir on them. Or, you have to pass the call to querySelector to the dir method. And because once we select that object we have it saved already in that variable, so if we need to acces it again we can just use the variable instead of having to call the dom element again
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 elements needs to load first
What does document.querySelector() take as its argument and what does it return?
a css selector as a string or the element selector as its string and it returns the first one it encounters, or null if theres nothing
What does document.querySelectorAll() take as its argument and what does it return?
a css selector as a string or element and it returns all the elements that match
What is the purpose of events and event handling?
to listen for things like clicks, hover etc
Are all possible parameters required to use a JavaScript method or function?
no,make sure their available as needed, but dont have to use
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 is passed into another function as an argument
What object is passed into an event listener callback when the event fires?
event object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
it is the element thats was interacted with and mdn
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
first one the second argument is the function and in the second one is going to call the argument automatically and it will ignore the first argument
What is the className property of element objects?
it represent the class attribute of the element
How do you update the CSS class attribute of an element using JavaScript?
using the classname property or classlist since it only adds or removes specific classes
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?
its faster when you need to re use it
How do you update the text within an element using JavaScript?
text content property
Is the event parameter of an event listener callback always useful?
not always sometimes you don to have to use it
what is hoisting
JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code. Hoisting allows functions to be safely used in code before they are declared.
what is the purpose of .target
The target property of the Event interface is a reference to the object onto which the event was dispatched.
where will children appear in the dom (incase you want to overlay something)
children will always be on top of their parent elments and siblings will be next to each other
do the event target listener functions always need and if statement
EXAMPLE:
$orangeButton.addEventListener(‘click’, normal);
no as long as you specify what happens inside once the event is runned it should work
EXAMPLE:
function normal(event) {
$popUp.classList.add('hidden');
$popUp.classList.remove('black');
}
what is event bubbling
Event bubbling is a type of event propagation where the event first triggers on the innermost target element, and then successively triggers on the ancestors of the target element in the same nesting hierarchy till it reaches the outermost DOM element or document object.
What event is fired when a user places their cursor in a form control?
focus
What event is fired when a user’s typing 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 ?
submit event
What does the event.preventDefault() method do?
cancels the event meaning that any default action normally taken by the implementation as a result of the event will not occur.
prevents page from reloading
What does submitting a form without event.preventDefault() do?
refreshes the page
What property of a form element object contains all of the form’s controls.
element
using
document.forms
Does the document.createElement() method insert a new element into the page?
no it only creates it
How do you add an element as a child to another element?
with appendchild() method
What do you pass as the arguments to the element.setAttribute() method?
name and value
What steps do you need to take in order to insert a new element into the page?
create element, give it content, and then appendchild
What is the textContent property of an element object for?
it adds text content to it
Name two ways to set the class attribute of a DOM element.
setAttribute, classname, classlist
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
its reusable
What is the event.target?
the element in where the event is being fired upon
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
Example:
event.target.tagname
What does the element.closest() method take as its argument and what does it return?
it takes a selector and returns the closest element with that tag
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?
put a listener on the parent
what is event delegation
Event Delegation is basically a pattern to handle events efficiently. Instead of adding an event listener to each and every similar element, we can add an event listener to a parent
What is the event.target?
the element where the user interacted with
What is the affect of setting an element to display: none?
it removes it from the document flow and hides it
What does the element.matches() method take as an argument and what does it return?
a selector string returns a boolean telling you if it matches the selector
How can you retrieve the value of an element’s attribute?
get attribute method
At what steps of the solution would it be helpful to log things to the console?
all the time
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?
an event listener on each of the elements and a bunch more functions
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?
make alot of conditional statements
