DOM Flashcards
Why do we log things to the console?
To be able to see how the page interacts with what we’ve written
Debugging and analysis
What is a “model”?
It’s a recreation that’s an essence (but not 1:1 ratio) stored in the computer’s memory of how the website is structured in relation to the document and elements on the page
Which “document” is being referred to in the phrase Document Object Model?
The html document
What is the word “object” referring to in the phrase Document Object Model?
The javascript objects
What is a DOM Tree?
Document Object Model
Recreation of the javascript object modeling the HTML content loaded in the browser
DOM tree can be the whole page, but it can also be a smaller section, where there’s a parent, child, descendent relation, however large or small
It’s a tree because of the relationships between the document and all the elements nodes are described like a family tree: parents, children, siblings, ancestors and descendents.
Give two examples of document methods that retrieve a single element from the DOM.
querySelector(), getElementById()
**querySelector() is basically the one mostly used
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll(), getElementsByClassName(), GetElementsByTagName()
**querySelectorAll() is also the one mostly used
Why might you want to assign the return value of a DOM query to a variable?
Permanent reference to that one element saves the computer time to not query/look for it everytime
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?
HTML loads top to bottom,
All the information needs to be loaded and in place before an action can happen via javascript
What does document.querySelector() take as its argument and what does it return?
Any CSS selector, written as string
Returns the first element object that matches the CSS selector
What does document.querySelectorAll() take as its argument and what does it return?
Any CSS selector, written as string
Returns all element objects that matches the CSS selector in the form of a Node List
Node list is object created to hold a list of dom elements
No ability to listen to event listeners, just DATA
But you can adjust every element IN the node list with a for loop, using the length of the node list
What is the purpose of events and event handling?
This is to make the user interaction with the webpage more organic and dynamic
Event handling is for something to happen when the event occurs
Are all possible parameters required to use a JavaScript method or function?
No, often it’s optional, like the eventListener has a 3 argument that is optional with default useCapture:false, so you don’t need to write it
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?
It’s a function passed into another function as an argument, which is invoked inside the outer function to complete some kind of routine or action
For example, event listeners will call the other function it’s trying to pass, but only javascript will call it when the event happens
What object is passed into an event listener callback when the event fires?
The event object
Contents returned are the data of what happened, where, how, when, etc
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
This is the targeting property of the event that is happening.
It’s the element where the interaction of the event occurred, NOT where the listener was applied
For example, it’ll tell you the property of where the event is that you’re calling or trying to modify
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
The first one will run a variable named handleClick which will run a function named handleClick upon the event ‘click’
The second one will call the handleClick() function immediately instead of after an event with undefined as an argument which will give back undefined and do nothing and thus render the ‘click’ function useless/bugged.
What is the className property of element objects?
className can get or set the value of the property of the HTML element
How do you update the CSS class attribute of an element using JavaScript?
object.className = ‘new class’
What is the textContent property of element objects?
It’s the text content of the node and its descendents
Text content that is present in the element
How do you update the text within an element using JavaScript?
variable.textContent = ‘new text content’
Is the event parameter of an event listener callback always useful?
Most of the time, yes it’s useful
Once in a while, no it’s not needed
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 for sure
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?
Blur 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 ?
Submit event on a form element, reloads the webpage
What does the event.preventDefault() method do?
Blocks the default action of the event
Ex. you can remove the checking of a checkbox
What does submitting a form without event.preventDefault() do?
Refreshes the webpage, then sends the data in the same page
What property of a form element object contains all of the form’s controls.
Elements
form.elements.message.value
What property of a form control object gets and sets its value?
Value property
form.elements.message.value
What is one risk of writing a lot of code without checking to see if it works so far?
If you run into a bug, then you don’t know where the bug actually happened and trying to find it wastes more time
What is an advantage of having your console open when writing a JavaScript program?
Check progress and make sure everything is working before proceeding
Does the document.createElement() method insert a new element into the page?
No, just creates it and only exists in javascript
How do you add an element as a child to another element?
appendChild() method
parent.appendChild(‘child’);
What do you pass as the arguments to the element.setAttribute() method?
The name (i.e. class, name, src)
The value, (whatever you’re going to name the name)
Both become strings cuz of DOM
What steps do you need to take in order to insert a new element into the page?
Create element
Create text content if needed
Locate the parent via querySelector()
AppendChild() to parent
What is the textContent property of an element object for?
Find what the textcontent it already has
Or assign a new textcontent
Name two ways to set the class attribute of a DOM element.
setAttribute() method
class name property
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
The function can be reused
Use the output elsewhere for multiple jobs
What is the event.target?
Tells you where the event happened in which element
Why is it possible to listen for events on one element that actually happen its descendent elements?
Because the default bubbling event flows outwardly from child to parent and outward
What DOM element property tells you what type of element it is?
TagName
Comes out in all caps and in string form
What does the element.closest() method take as its argument and what does it return?
CSS class name in string form
Returns the closest ancestor element
** exact opposite of querySelector, looks outward instead of inward
** querySelector can be used on any DOM element and you can use it on the parent to search its children
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?
Target the parent (ancestorElement.closest();) holding all the DOM element children via event delegation
What is the event.target?
This is the element where the event took place/originated from
What is the effect of setting an element to display: none?
It makes the entire element disappear
Removes it from document flow
What does the element.matches() method take as an argument and what does it return?
CSS selector in string form
Returns a boolean value if it matches/exists
*for verification method, to see if it’s the same thing or not
** only returns null if you’re trying to use a non-DOM element
How can you retrieve the value of an element’s attribute?
Element.getAttribute();
Takes an attribute name in string form
At what steps of the solution would it be helpful to log things to the console?
Every line of code
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’d need an individual eventListener PER 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?
Lots of if statements/conditional block for every scenario/function
