DOM Flashcards
Why do we log things to the console?
To see easily and more directly the code whenever I check or fix it.
What is a “model”?
It contains interactive data
Which “document” is being referred to in the phrase Document Object Model?
HTML.
What is the word “object” referring to in the phrase Document Object Model?
It referring to the JavaScript language.
Give two examples of document methods that retrieve a single element from the DOM.
querySelector and getDocumentByID.
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?
It reduces the computer’s work.
What console method allows you to inspect the properties of a DOM element object?
dir (directory).
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
Because of the source order.
What does document.querySelector() take as its argument and what does it return?
It takes an element, class, id, etc’s name and it returns their values.
What does document.querySelectorAll() take as its argument and what does it return?
It takes an element, class, id, etc’s name and it returns all of their values under the same name tag.
What is the purpose of events and event handling?
To handle and verify inputs and actions (user input, user actions, and browser actions).
What do [] square brackets mean in function and method syntax documentation?
It’s optional. But the type and listener must be there.
What method of element objects lets you set up a function to be called when a specific type of event occurs?
EventTarget method addEventListener().
What is a callback function?
It’s a function passed to another function as an argument.
What object is passed into an event listener callback when the event fires?
The first argument.
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The target property of the event. Ask MDN.
What is the difference between these two snippets of code? element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
The second code, handleClick with parentheses means that this function works right now.
What is the className property of element objects?
It gets and sets the value of the class attribute of the specified element.
How do you update the CSS class attribute of an element using JavaScript?
Using the getAttribute method.
How do you update the text within an element using JavaScript?
object name.textContent.
Is the event parameter of an event listener callback always useful?
No, because the event listener is not always needed.
Why is storing information about a program in variable better than only storing it in the DOM?
Because it reduces the work if I set up the value of the thing to the variable.
Why is storing information about a program in variable better than only storing it in the DOM?
Because it reduces the work if I set up the value of the thing to the variable.
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?
Using the appendChild() method.
What do you pass as the arguments to the element.setAttribute() method?
Attribute, and value of that attribute.
What steps do you need to take in order to insert a new element into the page?
Create the element, choose the spot you want to insert the new element and use the appendChild() method to append it on there.
What is the textContent property of an element object for?
Reading and writing.
Name two ways to set the class attribute of a DOM element.
Use setAttribute() method or className as a property of the object.
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
We can reuse rather than work again about to get that result, Dynamism.
What is the event.target?
The target property of the event interface is a reference to the object onto which the event was dispatched.
What DOM element property tells you what type of element it is?
event.target
What does the element.closest() method take as its argument and what does it return?
The argument is a selector and it returns itself or its ancestor.
How can you remove an element from the DOM?
Using the .remove() method.
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?
Using event.delegation.
