DOM (Document Object Model) Flashcards
What is a “model”?
A representation of an existing thing/concept
Which “document” is being referred to in the phrase Document Object Model?
The HTML document being loaded
What is the word “object” referring to in the phrase Document Object Model?
It is referring to the data type: object in JavaScript
What is a DOM Tree?
An element and all of its configurations + its relationship with its siblings/parents represented in the DOM
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.
doucment.querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
To keep the location/reference point saved so one doesn’t have to search the DOM Tree for an element repeatedly
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?
One has to allow the web page to fully load before trying to map it out with a DOM Tree
What does document.querySelector() take as its argument and what does it return?
It takes a CSS selector as an argument and returns the first element found with that selector.
What does document.querySelectorAll() take as its argument and what does it return?
Uses a CSS Selector and returns all elements found with that selector in a Node List.
Does assigning the return value of a DOM query actually assign that node to the variable?
No, it only saves the location of where that element is in the DOM Tree. (Tl;dr saves a reference point)
What is the DOM?
It is a recreation of the HTML Document stored as a JavaScript Object which is modeling the content of the HTML Document
What is the purpose of events and event handling?
To run a script whenever certain things happen within or to the browser.
It makes web pages more interactive for the user.
Are all possible parameters required to use a JavaScript method or function?
No, many functions/methods have optional parameters that do not need to be passed through as arguments for the function/method to execute.
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener('event', functionName [, Boolean]) -Boolean optional
What is a callback function?
A function passed as an argument through another function
What object is passed into an event listener callback when the event fires?
An event object that describes the event that occurred
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
A reference to the object in which an event was fired. One can check it by logging it. You could get more information at target documentation
What is the difference between these two snippets of code?
element.addEventListener('click', handleClick)
element.addEventListener('click', handleClick())
handleClick is run when the event fires, while handleClick() is run while the page loads
What is the className property of element objects?
A property that has the value of the classes applied to the element object as a string
How do you update the CSS class attribute of an element using JavaScript?
Re-assign element.className
What is the textContent property of element objects?
A property that has the value of the text content of the element object
How do you update the text within an element using JavaScript?
Re-assign element.textContent
Is the event parameter of an event listener callback always useful?
No, as sometimes we want code to run that doesn’t have any reference to the event that caused the code to run.
Why is storing information about a program in variables better than only storing it in the DOM?
It prevents one from having to re-query a document again in order to find/update a node.
What event is fired when a user places their cursor in a form control?
The ‘focus’ event is fired
What event is fired when a user’s cursor leaves a form control?
The ‘blur’ event is fired
What event is fired as a user changes the value of a form control?
The ‘event.target.value’ event is fired
What event is fired when a user clicks the “submit” button within a <form>?
The ‘submit’ event is fired
What does the event.preventDefault() method do?
It prevents the default behavior of the event.
What does submitting a form without event.preventDefault() do?
in the case of forms it prevents data from being passed into the URL and the page refreshing
What property of a form element object contains all of the form’s controls.
The elements property
What property of a form control object gets and sets its value?
The elements.whateverName.value property
Example syntax: $contactForm.elements.name.value
Does the document.createElement() method insert a new element into the page?
No, it only creates it in the DOM.
How do you add an element as a child to another element?
appendChild(childname)
What do you pass as the arguments to the element.setAttribute() method?
element.setAttribute('attributeName', 'attributeValue')
What steps do you need to take in order to insert a new element into the page?
One would need to create the element in the dom and add whatever necessary text content then append that element as a child to a queried element on the page.
What is the textContent property of an element object for?
It is used to get or set the textContent found within an element
Name two ways to set the class attribute of a DOM element.
One can use element.setAttribute() or provide it as an optional argument when using createElement
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
It can easily be scaled and reapplied elsewhere on the page.
What is the event.target?
It is the element which the event originated from.
Why is it possible to listen for events on one element that actually happen its descendent elements?
Event bubbling, which is default to event listeners unless one adds an optional boolean as an argument.
What DOM element property tells you what type of element it is?
event.target.tagName
What does the element.closest() method take as its argument and what does it return?
It takes a string as an argument with the syntax of a CSS selector and returns the closest ancestor.
How can you remove an element from the DOM?
element.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?
By taking advantage of the default behavior of event listeners: event bubbling. With event bubbling one can instead stick a listener on a parent element and target its children. (This is called event delegation)
What does the element.matches() method take as an argument and what does it return?
It takes a string following the format of a css selector and returns a boolean of true if the selector is found on that element and false if it is not.
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 taking advantage of the default behavior of event listeners: event bubbling. With event bubbling, one can instead stick a listener on a parent element and target its children. (This is called event delegation)
What does the element.matches() method take as an argument and what does it return?
It takes a string following the syntax of a CSS selector and returns a boolean true if that selector is found on the element it is used on and false if it isn’t.
How can you retrieve the value of an element’s attribute?
element.getAttribute('example')
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?
One would have to add an event listener for each tab + view.
