JS DOM Flashcards
Why do we log things to the console?
to see the data
What is a “model”?
a representation of something
Which “document” is being referred to in the phrase Document Object Model?
HTML document
What is the word “object” referring to in the phrase Document Object Model?
the model is made up of nodes, which are javascript objects
What is a DOM Tree?
a model of a web page made up of 4 types of nodes
Give two examples of document methods that retrieve a single element from the DOM.
getElementById(), querySelector()
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
to access the DOM element later in the code to manipulate it
What console method allows you to inspect the properties of a DOM element object?
console.dir()
Why would a JavaScript tag need to be placed at the bottom of the HTML content instead of at the top?
to allow all the HTML elements to load, before doing anything to them
What does document.querySelector() take as its argument and what does it return?
- argument is a css selector type
- returns object of first element within the document that matches
What does document.querySelectorAll() take as its argument and what does it return?
- argument is one or more selector types
- returns nodelist of elements within the document that matches group of selectors
What is the purpose of events and event handling?
events allow for triggering code based on conditions
What do [] square brackets mean in function and method syntax documentation?
optional
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?
a function which is an argument of another function
What object is passed into an event listener callback when the event fires?
event object
What is the event.target?
target is a property which references the element which triggered the event
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
- the first method runs on ‘click’
- the second method gets the return value of undefined
What is the className property of element objects?
a string containing value of class attribute, which allows you to assign a css class to an element
How do you update the CSS class attribute of an element using JavaScript?
className property
*example: document.querySelector(‘element-name’).className = ‘text content’;
What is the textContent property of element objects?
a string of the text of an element in between the tags
How do you update the text within an element using JavaScript?
textContent property
*example: document.querySelector(‘element-name’).textContent = ‘text content’;
Is the event parameter of an event listener callback always useful?
not always, only when you need to access an event property directly
Why is storing information about a program in variables better than only storing it in the DOM?
in DOM, you have to query it, in variable it is easily accessible data
Does the document.createElement() method insert a new element into the page?
it creates an element, but does not insert it into the page
How do you add an element as a child to another element?
the appendChild() method
What do you pass as the arguments to the element.setAttribute() method?
first arg: a string for attribute name
second arg: a string for attribute value
What steps do you need to take in order to insert a new element into the page?
document.createElement(), then
use the appendChild() method on an element on the page to insert it into that element on the page
What is the textContent property of an element object for?
adding text content in between the tags of an element
Name two ways to set the class attribute of a DOM element.
elementName.setAttribute(‘class’, ‘value of the class’);
elementName.className = ‘value of the class’;
What is the event.target?
the element which is targeted by the event
Why is it possible to listen for events on one element that actually happen its descendent elements?
events bubble up to an element’s parents and ancestors
What DOM element property tells you what type of element it is?
tagName property (event.target.tagName)
What does the element.closest() method take as its argument and what does it return?
- argument is css selector list string
- returns element which is the closest ancestor
How can you remove an element from the DOM?
the remove() method removes the element
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?
add the event listener only to the element which the DOM elements are being inserted since the event will bubble up to that parent element (aka event delegation)
What does the element.matches() method take as an argument and what does it return?
argument: a selector string
return: boolean
How can you retrieve the value of an element’s attribute?
getAttribute() method will return the value of a specified attribute
What is JSON?
JavaScript Object Notation is a text based data-interchange format following JavaScript object syntax
What are serialization and deserialization?
- serialization is converting a data structure (such as an object) into a stream of bytes (such as a JSON string) which can then be stored
- deserialization is converting a stream of bytes (such as a JSON String) into a data structure (such as an object) which can then be used
Why are serialization and deserialization useful?
- serialization allows for saving the state of an object (JSON.stringify())
- deserialization allows for recreating an object in different programming languages (JSON.parse())
- These also allow for sending or passing the object via the internet and store it in memory
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify() method
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse() method
How to you store data in localStorage?
.setItem() Method
ex. localStorage.setItem(‘’)
How to you retrieve data from localStorage?
.getitem() methodex. localStorage.getItem(‘’)
What data type can localStorage save in the browser?
string
When does the ‘beforeunload’ event fire on the window object?
before the page unloads
Besides adding an event listener callback function to an element or the document, what is one way to delay the execution of a JavaScript function until some point in the future?
setTimeout() method
How can you set up a function to be called repeatedly without using a loop?
setInterval() method
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0 milliseconds
What do setTimeout() and setInterval() return?
a timeoutID/ intervalID (number), which can be passed to clearTimeout()/ clearInterval() to cancel the timeout
