DOM Flashcards
Why do we log things to the console?
So we can verify the outputs. Further, troubleshoot and
debugging.
What is a ”model”?
A model is a representation(or recreation) of something. In the case of DOM, it
is a copy of the page layout before any changes are applied
Which ”document” is being referred to in the phrase Document Object Model?
The document is the entire HTML document
What is the word ”object” referring to in the phrase Document Object Model?
The objects are JavaScript objects
What is a DOM Tree? A DOM Tree is a model of the HTML code.
It arranges the elements in a
HTML file by their elements and relationship to each other
Give two examples of document methods that retrieve a single element from the DOM.
We can use getElementById() and querySelector() to select single elements from the DOM
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName(), getElementsByTagName(), or querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
So we can console log and verify we selected the correct element or to use it to modify the page later on
What console method allows you to inspect the properties of a DOM element object?
console.dir() is used to inspect an element’s properties in the console
Why would a
tag need to be placed at the bottom of the HTML content instead of at the top?
It is placed at the bottom because a browser needs to run all of the HTML first before we can access them
What does document.querySelector() take as its argument and what does it return?
It takes in a string that must also be a valid CSS selector. It will return an element object that represents the first element in the document that matches the specified CSS selector
What does document.querySelectorAll() take as its argument and what does it return?
It takes in a string that must also be one or many valid CSS selectors separated by commas. It will return a list with the elements that corresponds to the CSS selectors
What is the purpose of events and event handling?
Events are used for detecting when a user interacts with a web page. Event handling is a way to respond to the user’s interactions
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?
addEventListener(’Event’,functionName), ’Boolean’ (default: false. Optional)
What is a callback function?
A callback function is a function passed into another function as an
argument, which is then invoked inside the outer function to complete some kind of routine or action.
What object is passed into an event listener callback when the event fires?
The Event object. The
content is all of the data regarding the object that has occurred
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 interface is a reference to the object onto
which the event was dispatched. It shows which element the effect is taking place for. If we are unsure, we can check MDN. It is the element where the event occurred, not the element the event was applied
What is the difference between these two snippets of code?
– element.addEventListener(’click’, handleClick)
– element.addEventListener(’click’, handleClick())
First one is referencing a function where the second one uses the handleClick’s function’s return value as an argument
What is the className property of element objects?
The className property of the Element interface
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?
We can use className property of the DOM
What is the textContent property of element objects?
The textContent property of the Node interface
represents the text content of the node and its descendants
How do you update the text within an element using JavaScript?
We use textContent property. Select
the element with a DOM query and then assign the textContent of that selection to a new text content
Is the event parameter of an event listener callback always useful?
No, because we do not always need it to be calledback
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
Harder. Because we would need to create a new DOM everytime we want to update
the page
Why is storing information about a program in variables better than only storing it in the DOM?
This way we can refer back to it whenever we want
Does the document.createElement() method insert a new element into the page?
No. It creates the
elements
How do you add an element as a child to another element?
we use the appendChild() method
What do you pass as the arguments to the element.setAttribute() method?
A string of the name of
the attribute and a value of the attribute
What steps do you need to take in order to insert a new element into the page?
- Create the element – createElement()
- Give it content – createTextNode()
- Query select an element to append the element to – document.querySelector()
- Append it to a child or before a selected DOM node – appendChild() or insertBefore(
What is the textContent property of an element object for?
This is used for adding, changing, or
modifying the text content of the node and its decscendants
Name two ways to set the class attribute of a DOM element.
We can use element.setAttribute() or
using class name property
What are two advantages of defining a function to do create something (like the work of creating a
DOM tree)?
We can reuse the function elsewhere and use the return value elsewhere as well
What is the event.target?
This will gives us the most specific element the event is interacting with
What DOM element property tells you what type of element it is?
The tagName property
What does the element.closest() method take as its argument and what does it return?
It takes in CSS
selectors. The function returns the closest ancestor element or itself which matches the selectors
How can you remove an element from the DOM?
We can use the remove() method of the element
object
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?
We can add an event listener to the
parent of the list and use a function to determine if the child is being clicked or not. Or use event
delegation
