DOM Flashcards
only use?
querySelector(‘xxx’)
querySelectorAll(‘xxx’)
callback
share the value of one function with another
event handler
the function write for event (no return in here because only event will get the value, you will never call it by yourself)
What is a DOM Tree?
Which “document” is being referred to in the phrase Document Object Model?
html document
Give two examples of document methods that retrieve a single element from the DOM.
querySelector
querySelectorAll
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?
easy to reuse
What console method allows you to inspect the properties of a DOM element object?
console.log
console.dir
Why would a
tag need to be placed at the bottom of the HTML content instead of at the top?
What does document.querySelector() take as its argument and what does it return?
element in dom
What does document.querySelectorAll() take as its argument and what does it return?
all () element in dom
What is the purpose of events and event handling?
for moniter user interaction, when fired, run function
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?
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The target event property returns the element that triggered the event. The target property gets the element on which the event originally occurred, opposed to the currentTarget property, which always refers to the element whose event listener triggered the event.
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?
$xxx
$xxx.className = ppp
What is the textContent property of element objects?
The textContent property sets or returns the text content of the specified node, and all its descendants.
How do you update the text within an element using JavaScript?
Use the textContent property to change the text of a div element, e.g. div. textContent = ‘Replacement text’ . The textContent property will set the text of the div to the provided string, replacing any of the existing content.
Is the event parameter of an event listener callback always useful?
Defining the event as a parameter of your handler function is optional but, sometimes (most times), it is useful for the handler function to know about the event that happened.
Does the document.createElement() method insert a new element into the page?
no. it only creat
How do you add an element as a child to another element?
ae.appendChild(xxx)
What do you pass as the arguments to the element.setAttribute() method?
ement.setAttribute(‘attribute type’, ‘attribute value’)
What steps do you need to take in order to insert a new element into the page?
creat node element
grab the parent element with querySelector
append node to parent
What is the textContent property of an element object for?
set the text value for its parent node
Name two ways to set the class attribute of a DOM element.
setAttribute
className
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
avoid repeat code
What is the event.target?
where the event started
Why is it possible to listen for events on one element that actually happen its descendent elements?
event buble
What DOM element property tells you what type of element it is?
event.target.tagName
What does the element.closest() method take as its argument and what does it return?
parent
How can you remove an element from the DOM?
delete
What is the event.target?
the origin source where event occur
What is the affect of setting an element to display: none?
disappear
What does the element.matches() method take as an argument and what does it return?
css selector as string value, return boolean. true means match , false means not match
How can you retrieve the value of an element’s attribute?
getAttribute
At what steps of the solution would it be helpful to log things to the console?
everytime
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?
creat individual eventlisener for each part
If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?
data-xxx attribute
store a meaningful name for connect dom and js
dataset.xxx
shorthand of getAttribute for data- attribute
