DOM Flashcards
What is a “model”?
A representation of something that focuses on the relevant characteristics of said thing
Which “document” is being referred to in the phrase Document Object Model?
The html element being loaded by the browser
What is the word “object” referring to in the phrase Document Object Model?
The JavaScript object that the browser creates to model the html element
What is a DOM Tree?
The hierarchy of element nodes in the document object
Give two examples of document methods that retrieve a single element from the DOM.
.querySelector(), .getElementById()
Give one example of a document method that retrieves multiple elements from the DOM at once.
.querySelectorAll(‘selector’)
Why might you want to assign the return value of a DOM query to a variable?
It allows the script to reuse the node without having to query for it every time, saving on computation
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?
Placing it at the top would mean all of the script is run before any of the body elements are loaded
What does document.querySelector() take as its argument and what does it return?
argument: selector string
return: first element node with the matching selector
What does document.querySelectorAll() take as its argument and what does it return?
argument: selector string
return: a NodeList of all element nodes that match the selector
What is the purpose of events and event handling?
They allow the web page to react to situational events that occur in real time
What method of element objects lets you set up a function to be called when a specific type of event occurs?
.addEventListener(‘event’, function)
What is a callback function?
A function passed as an argument into another function, which can then be used by the other function
What object is passed into an event listener callback when the event fires?
An event object containing the details (e.g. mouse location) of the event, that was created by the browser right when the event fires
What is the event.target?
The most immediate element node that was interacted with when the event triggers
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
The former uses a callback function while the latter calls the function handleClick immediately when the line is read
What is the className property of element objects?
It is the string value of the element’s class attribute
How do you update the CSS class attribute of an element using JavaScript?
Set element.className to a new string value
What is the textContent property of element objects?
It is a string of the element’s text content
How do you update the text within an element using JavaScript?
Set element.textContent to a new string value
Is the event parameter of an event listener callback always useful?
No, sometimes the event is only meant to trigger other actions
Why is storing information about a program in variables better than only storing it in the DOM?
It allows the information to be modified by only modifying the variables
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?
It prevents the event from executing its default actions (e.g. the event submit will no longer reset the form)
What does submitting a form without event.preventDefault() do?
The form will get reset
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
Does the document.createElement() method insert a new element into the page?
No, it only returns a new node
How do you add an element as a child to another element?
.appendChild(childNode)
What do you pass as the arguments to the element.setAttribute() method?
nameOfAttribute, valueOfAttribute
What steps do you need to take in order to insert a new element into the page?
Create the element, query the DOM for a parent element, append the new element to the parent element
What is the textContent property of an element object for?
It allows you to get and set the element’s text content
Name two ways to set the class attribute of a DOM element.
Modify the property .className or use the method .setAttribute(‘class’, ‘value’)
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
It allows you to scale the task and makes the function reusable in other situations
Why is it possible to listen for events on one element that actually happens in its descendent elements?
Through event bubbling, clicking on an element means simultaneously clicking on it’s ancestors
What DOM element property tells you what type of element it is?
.tagName
What does the element.closest() method take as its argument and what does it return?
It takes a CSS selector in string form as an argument and returns the nearest ancestor that satisfies the selector
How can you remove an element from the DOM?
.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?
Apply the listener to the parent element and set a condition in the handler function for whenever the target is the desired element
What is the affect of setting an element to display: none?
The browser will render the page as if the element and all it’s descendent elements were not there
What does the element.matches() method take as an argument and what does it return?
It takes a CSS selector in string form as an argument and returns a boolean on whether or not the element satisfies the selector
How can you retrieve the value of an element’s attribute?
.getAttribute(‘attribute’)
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 query for that tab and add another event listener for a click on that 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 need to write a conditional for each tab with a line of code addressing each tab per conditional
