DOM Flashcards
Why do we log things to the console?
To check and debug our code
What is a “model”?
data structure
Which “document” is being referred to in the phrase Document Object Model?
The HTML document/ entire document
What is the word “object” referring to in the phrase Document Object Model?
The objects that make up the Dom tree
What is a DOM Tree?
THE DOM TREE IS A
MODEL OF A WEB PAGE consisting of objects
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.
getElementsByClassName()
getElementsByTagName()
querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
Save it to a variable to save us time to access later
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?
The browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.
What does document.querySelector() take as its argument and what does it return?
Takes a CSS selector as an argument and returns the first matching element.
What does document.querySelectorAll() take as its argument and what does it return?
Uses a CSS selector as argument and returns all matching elements.
Why do we log things to the console?
To check and debug our code.
What is the purpose of events and event handling?
Allows you or a user to interact and then respond to events that happen
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???
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?
event object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
point of interaction ie. mouseclick, target property. mdn
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
the second is excuting a function handleClick
Does the document.createElement() method insert a new element into the page?
No, only creates the element
How do you add an element as a child to another element?
appendChild() method
What do you pass as the arguments to the element.setAttribute() method?
name and value
What steps do you need to take in order to insert a new element into the page?
create element node , query elector , appened child
What is the textContent property of an element object for?
adding text content to an element and get text from element
Name two ways to set the class attribute of a DOM element.
Element.setAttribute method, class name
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
What is the event.target?
The point of interaction by the user, target of the event
Why is it possible to listen for events on one element that actually happen its descendent elements?
Because of the event bubbling
What DOM element property tells you what type of element it is?
type property?
What does the element.closest() method take as its argument and what does it return?
A selector string and will return the Element which is the closest ancestor of the selected element.
How can you remove an element from the DOM?
By using the Element.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?
By targeting the parent element like in our task we targeted the .task-list
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?
by using the className property of the Element
What is the textContent property of element objects?
it represents the text content of the node and its descendants.
How do you update the text within an element using JavaScript?
by using the textCo
ntent property of the Element
Is the event parameter of an event listener callback always useful?
Yes the parameters are required but not all of them are useful.
Is the event parameter of an event listener callback always useful?
Yes the parameters are required but not all of them are useful.
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
Why is storing information about a program in variables better than only storing it in the DOM?
Allows you to use that information again if needed.
what is the event.target?
The target event property returns the element that triggered the event.
Why is it possible to listen for events on one element that actually happen its descendent elements?
Event delegation
What DOM element property tells you what type of element it is?
What does the element.closest() method take as its argument and what does it return?
a valid css selector or itself and returns the closest ancestor
How can you remove an element from the DOM?
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?
What is the affect of setting an element to display: none?
the affected element will disappear
What does the element.matches() method take as an argument and what does it return?
A string containing valid CSS selectors to test the Element against. Returns true if the element matches selector or false
How can you retrieve the value of an element’s attribute?
the getAttribute method
At what steps of the solution would it be helpful to log things to the console?
after every step.
If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?
