DOM Flashcards
Why do we log things to the console?
to check that the code is doing what we think it should be doing / for debugging
What is a “model”?
a functional, simplified representation of something.
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?
to the javascript objects (an object-oriented language)
What is a DOM Tree?
a central node serving as the trunk, with a number of children nodes branching out from it (it’s branches), which in turn have their own nodes branch out of them until you get to their terminal elements (their leaves). Basically a matrioshka doll of nested parent-child-sibling elements.
Give two examples of document methods that retrieve a single element from the DOM.
document. getElementByClassName();
document. getElementById();
document. querySelector();
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll();
Why might you want to assign the return value of a DOM query to a variable?
so you can easily access the properties/values o the DOM object, manipulating, adding, transforming or deleting them.
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?
so that the DOM objects to be constructed can query their value from already existing elements (otherwise, the value null would be stored in the DOM variables)
What does document.querySelector() take as its argument and what does it return?
it takes a CSS selector for the target HTML element, and it returns a JavaScript object representing said element, called a DOM object.
What does document.querySelectorAll() take as its argument and what does it return?
it takes a CSS selector for all HTML elements that satisfy it, and returns a JavaScript array that represents a list of all those elements called a DOM list (or a DOM node list).
Why do we log things to the console?
To check if the code is doing what we expect it to do/ check for bugs.
What is the purpose of events and event handling?
events are objects that log information of the web-page triggered by an… event. Event handling is to pass an event as the argument for a function that’ll utilize the data stored in the event object to response to said occurance.
Are all possible parameters required to use a JavaScript method or function?
No
What method of element objects lets you set up a function to be called when a specific type of event occurs?
element.addEventListener();
What is a callback function?
a function passed as the argument of another function
What object is passed into an event listener callback when the event fires?
The triggering event object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
the element targeted by the event;
using console.log(event.target);
using console.dir(event.target);
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick);
element. addEventListener(‘click’, handleClick());
in the first one, we have the callback function handleClick being passed as an argument for the .addEventListener method;
while in the second one, the function handleClick() is being called, and the return value of that function is being passed as an argument for the .addEventListener method
What is the className property of element objects?
the string value of the element’s css class attribute;
How do you update the CSS class attribute of an element using JavaScript?
assign the new class values as a string to $element.className
What is the textContent property of element objects?
a string value representing the text content of an html element
How do you update the text within an element using JavaScript?
$element.textContent = ‘new text’;
Is the event parameter of an event listener callback always useful?
no
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. There may be a simpler solution with some property of the click event object, but this may be more vulnerable to outside actors (taking values not stored in the javascript of the page)
Why is storing information about a program in variables better than only storing it in the DOM?
the document is suseptible to being tampered with via the dev tools, making it more vulnerable than storing data into javascript variables
Does the document.createElement() method insert a new element into the page?
no
How do you add an element as a child to another element?
$parentElement.appendChild($childElement);
What do you pass as the arguments to the element.setAttribute() method?
a string with the name of the attribute to be set, and another string withe the value to be assign to the attribute;
What steps do you need to take in order to insert a new element into the page?
.creatElement() -> .appendChild()
What is the textContent property of an element object for?
to get and/or set the text content of an html element
Name two ways to set the class attribute of a DOM element.
.setAttribute(‘class’, ‘class-value’);
.className = ‘class-value’;
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
so you can reuse the function to do that piece of work some other time/ multiple times
What is the event.target?
the DOM object representing the HTML element where the event was triggered
Why is it possible to listen for events on one element that actually happen its descendent elements?
because the default event flow is bubbling upwards
What DOM element property tells you what type of element it is?
$element.tagName;
What does the element.closest() method take as its argument and what does it return?
it takes a string with the syntax of a CSS selector, and returns the first parent node to match the selector;
How can you remove an element from the DOM?
$element.delete();
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 parent node for the new elements
