DOM Flashcards
Why do we log things to the console?
To test we have the correct data and keep track of where we are, in regards to the script
What is a “model”?
A representation of an original thing
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 objects within the document
What is a DOM Tree?
The representation of the HTML with all the children and their descendants within the elements.
Give two examples of document methods that retrieve a single element from the DOM.
document. queryselector(“CSS selector”);
document. getElementByID(“ID name”);
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll(“CSS selector”);
Why might you want to assign the return value of a DOM query to a variable?
If we need the item repeatedly, we can store the value to help reduce the work it needs to do.
Querying an object takes a good amount of work for your computer
What console method allows you to inspect the properties of a DOM element object?
console.dir(object);
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
The elements need to have loaded into the page before they are manipulated by our script
Most scripts (HTML, CSS, JS) are read from top to bottom.
What does document.querySelector() take as its argument and what does it return?
It takes a CSS selector as its argument and returns the while item w/ its content
<h1>Title<h1>
It returns the first item matching that description, from top down</h1></h1>
What does document.querySelectorAll() take as its argument and what does it return?
A CSS selector and it returns a list of all the nodes that meet the specification
It returns an list of all the nodes we asked, and all their additional details from .dir
What is the purpose of events and event handling?
Events allow us to determine when something occurs, like a user interacting with our page or something in the HTML changing with DOM
Handling the events would mean we have a response to the event we are now listening for. In the form of a function, with whatever commands we need
What method of element objects lets you set up a function to be called when a specific type of event occurs?
.addEventListener
element.addEventListener(‘event’, functionName);
What is a callback function?
When we use a function as an argument for another function
function getFullName (first, last) {
var fullName = first + ' ' + last;
return fullName;
}
function greet(getFullName('John', 'Doe')) {
console.log('Welcome to the program ' + getFullName)
}
What object is passed into an event listener callback when the event fires?
An event object, which is being created by the browser, for you.
It is an object which contains all the information needed
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
Event target is the object we are watching, usually in the form of an element
We can check by consoling the event and the event.target
The line without the () after the function would work. The other would not. () would run instantly, when the code is read, which is not what we want.
What is the className property of element objects?
It allows you to replace the class of a stored element
element.className = ‘new-classes’;
How do you update the CSS class attribute of an element using JavaScript?
element.className = ‘new-classes’;
What is the textContent property of element objects?
It allows you to replace all the content (including children) of a stored element, with your new text
How do you update the text within an element using JavaScript?
element.textContent = ‘This is the new text’;
Is the event parameter of an event listener callback always useful?
For the event listener, not always, but it will always be there globally
In some cases, no arguments need to be passed into the listener
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
More difficult. Instead of using a counter, we would need to ask the DOM for the value of the elements, every time we were going to interact with them.
Why is storing information about a program in variables better than only storing it in the DOM?
It allows for the selected element to be called multiple times, without issues.
Does the document.createElement() method insert a new element into the page?
No. It created an element but it is not added until we append it.
How do you add an element as a child to another element?
parentVar.appendChild(childVar);
What do you pass as the arguments to the element.setAttribute() method?
(‘attributeType’, ‘valueOfAttribute’);
element.setAttribute(‘src’,’image/dog.jpeg’);
What steps do you need to take in order to insert a new element into the page?
Create and store a created element in the DOM
Get the parent element from the DOM
Append the child into the parent element
What is the textContent property of an element object for?
It allows you to modify the text of a stored element you got from the DOM
$h1.textContent = ‘Yo mama!’
Name two ways to set the class attribute of a DOM element.
element. className = ‘large-font’;
element. setAttribute(‘class’, ‘large-font’);
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
Saving the item saves the computer work by only asking it to pull from the document one time, as opposed to each time we need to edit it
It facilitated how we can call the element, for later use
What is the event.target?
The target is the entire thing that was specifically clicked.
If your whole li is listening for a click, and it has a span in it, you’ll get the following:
<span>Text Content</span>
Why is it possible to listen for events on one element that actually happen its descendent elements?
When the event occurs, we can see the list of items within the parent, to specifically know what part of the node was clicked.
Which DOM element property tells you what type of element it is?
event.target.tagName will tell you the element/tag, in all capital letters
For the span example, it’ll return the string “SPAN”
What does the element.closest() method take as its argument and what does it return?
It takes the target you are currently selecting and selects the closest item you are searching for, FROM ANCESTORS
For example:
You clicked on the a tag in this string: «a>div</a>> Find Store «a>a</a>>text>
event.target: «a>a</a>>text
You want to store the whole thing containing the a tag:
var container = event.target.closest(‘div’);
How can you remove an element from the DOM?
$h1.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?
Add the event listener to the entire section, as opposed to the specific button
From there, you can use event.target to observe which items are being interacted with.
