Document Object Model Flashcards
Why doe we log things to the console?
To debug our code and make sure it works
What is a “model”?
a representation of the HTML page in tree form
Which “document” is being referred to in the phrase Document Object Model
The HTML document but we’re working with the byproduct of the document
What is the word “object” referring to in the phrase Document Object Model
Each object represents a different part of the page loaded in the browser
What is a DOM Tree?
A model of the page when it loads in a browser in the form of a tree
Give two examples of document methods that retrieve a single element from the DOM
QuerySelector and getElementById
Give one example of a document method that retrieves multiple elements
querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
Its easier to find if the browser needs to use the same elements more than once.
What console method allows you to inspect the properties of a DOM element object?
console.dir()
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
So it can create a model after the document since the browser reads it from top to bottom
What does the document.querySelector() take as its argument and what does it return
it takes in a css selector or and returns a HTML element object representing the first element in the document that matches the specified set of CSS selectors or null if there are no mtaches
What does document.querySelectorAll() take as its argument and what does it return?
selectors and it returns a nodelist containing one element object for each element that matches at least one specific selector or an empty nodelist if none match.
What is the purpose of events and event handling?
Events trigger functions in javascript code and event handling is the steps it takes for events to trigger the code
what method of element objects lets you set up a function to be called when a specific type of event occurs?
The eventTarget.addEventListener();
What is a call back function?
a function passed into another function as an argument, which is the invoked inside the outer function to complete some kind of action or routine
What object is passed into an event listener callback when the event fires?
the event object
what is the event.target? if you weren’t sure, how would you check? Where could you get more information about it?
The target property of the event interface which references the object onto which the event was dispatched. console.log MDN
What is the difference between these two snippets of code? element.addEventListener(‘click’, handleClick) element.addEventListener(‘click’, handleClick())
The second one fires the event when the page gets loaded and the first waits for the event to happen then fires the function
Are all possible parameters required to use a JavaScript method or function?
no
What is the className property of element objects?
Property of the element interface that 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?
Add the property className
What is the textContent property of element objects?
Represents the text content of the node and its descendants
How do you update the text within an element using JavaScript?
textContent property
is the event parameter of an event listener callback always useful?
Not always useful but will always be present and you should always have it.
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?
If you wanna do work in JS not very intuitive to go to the HTML and bring it back to do something. We want everything in one spot.
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 event
What does event.preventDeafault() method do?
prevents the browser from automatically reloading with the forms values in the URL/prevents default behavior of the form
What does submitting a form without event.preventDefault do?
automatically loads the form values
What property of a form element object contains all the form’s control
the element
What property of a form control object gets and sets its value?
the value property
What is one risk of writing a lot of code without checking to see if its worked so far?
You don’t know if you ran into errors halfway through writing.
what is the advantage of having your console open when writing a javascript program?
To test your code to make sure its working.
What is the event.target
the target property of the event interface which is reference to the object onto which the event was dispatched
Why is it possible to listen for events on one element that actually happen its descedant elements?
Because of event bubbling
What DOM element property tells you what type of element it is?
element.tagName
What does the element.closest() method take as its argument and what does it return?
The selector and closestElement is the elemnt which is the closest ancestor of the selected element. It may be null.
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?
By just targeting the parent element/put it on the element that holds the element.
What is the event.target?
the target property of the event interface which is reference to the object onto which the event was dispatched.
What does the element.matches method take as its arugment and what does it return.
Selector string, boolean
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 woul dyour JavaScript code be written instead?
we’d have to use an event listener for every element.
if you didn’t use a loop to conditionally show or hide the views in the page, how woul dyour Javascript code be written instead?
You’d need to write a conditional for each view.
How can you retrieve the value of an elements attribute?
getAttribute() method
