DOM Flashcards
Why do we log things to the console?
To double check the code is doing what is intended.
What is a “model”?
The model is called a DOM tree. The tree is stored in the browsers’ memory.
Which “document” is being referred to in the phrase Document Object Model?
The document is the html file.
What is the word “object” referring to in the phrase Document Object Model?
The object represents a different object for each part of the page.
What is a DOM Tree?
A model of the selected element.
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 from the DOM at once.
document.querySelectorAll().
Why might you want to assign the return value of a DOM query to a variable?
So you can have an access point instead of having to query it every time you need it.
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?
So the js file can parse the entire html content first.
What does document.querySelector() take as its argument and what does it return?
querySelector takes css selectors and the argument and returns the content of that element.
What does document.querySelectorAll() take as its argument and what does it return?
querySelectorAll takes css selectors and returns a node list.
Why do we log things to the console?
To clearly see what our line of code is doing.
What is the purpose of events and event handling?
Events are used to trigger a particular function. Event handlers are steps triggered after the event occurs.
What method of element objects lets you set up a function to be called when a specific type of event occurs?
object.addEventListener.
What is a callback function?
A callback function is a function passed into another function as an argument. It invokes the function inside.
What object is passed into an event listener callback when the event fires?
The type of event, and the function given.
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
If not sure, console log the event.target. MDN has more information. Event.target is a DOM interface implemented by objects that can receive events and may have listeners for them.
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
The snippet with the callback function calls that line of code when its run instead of when the event occurs.
What is the className property of element objects?
The className property allows us to get the value of the class attribute, as well as setting the value of it.
How do you update the CSS class attribute of an element using JavaScript?
You would query the element first and then use the className property to update the attribute.
What is the textContent property of element objects?
The textContent property collects the text in that element as well as allowing updates to the text.
How do you update the text within an element using JavaScript?
Query the element first and then use textContent to update the text.
Is the event parameter of an event listener callback always useful?
No, but the event parameter should always be used.
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
Harder.
Why is storing information about a program in variables better than only storing it in the DOM?
With the variable, we can reuse that query. Without the variable, we would have to query the DOM every time.
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?
blue 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 form?
submit event
What does the event.preventDefault() method do?
It tells the current event that is referred to, to not do the default behavior.
What does submitting a form without event.preventDefault() do?
The page will refresh and lose the submitted form because it has no where to store it.
What property of a form element object contains all of the form’s controls.
HTMLFormControlsCollection
What property of form a control object gets and sets its value?
HTMLFormElement
What is one risk of writing a lot of code without checking to see if it works so far?
Waste of time. Hard to debug the longer it is.
What is an advantage of having your console open when writing a JavaScript program?
To constantly check if the js code is functional.
Does the document.createElement() method insert a new element into the page?
yes
How do you add an element as a child to another element?
element.appendChild(childelement)
What do you pass as the arguments to the element.setAttribute() method?
An attribute name as the first argument and a value for that attribute as the second argument.
What steps do you need to take in order to insert a new element into the page?
Use document.createElement() to make the element. Then add this newly created element to the desired parent element using element.appendChild()
What is the textContent property of an element object for?
The textContent property gets text content of that element or to set the element’s text content.
Name two ways to set the class attribute of a DOM element.
element.setAttribute()
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
To work with data that we don’t know the exact size of. It allows the code to be reusable.
What is the event.target?
.
Why is it possible to listen for events on one element that actually happen its descendent elements?
.
What DOM element property tells you what type of element it is?
.
What does the element.closest() method take as its argument and what does it return?
.
How can you remove an element from the DOM?
.
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?
.
