DOM Querying, Events, and Manipulation Flashcards
What is the className property of element objects?
It grabs and sets the value of the class
It’s a property holding the class value of the element
How do you update the CSS class attribute of an element using JavaScript?
className = ‘new-value’
What is the textContent property of element objects?
Whatever text is inside of the element and it’s children elements
How do you update the text within an element using JavaScript?
div1.textContent = ‘New value’
Is the event parameter of an event listener callback always useful?
Not always
Why is storing information about a program in variables better than only storing it in the DOM?
So we can reuse this information/data more easily
It makes the browser run more processes and do more work
Why do we log things to the console?
To test and communicate with our code and see if it is working as intended
Debugging and double checking your value
What is a “model”?
A representation/recreation of something
Which “document” is being referred to in the phrase Document Object Model?
It represents the entire web page. It is the starting point to the DOM Tree
What is the word “object” referring to in the phrase Document Object Model?
Objects are nodes within the DOM Tree
They represent every single element in the HTML document
What is a DOM Tree?
A map of all elements and nodes that represents their relation to other elements
Relations: Parents, Childrens, Siblings, ancestors, and descendants
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?
When you need to work with the element more than once, you should use a variable to store the result of this query
var eleId = getElementByID(‘One’);
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 can access them.
What does document.querySelector() take as its argument and what does it return?
It takes the first CSS Selector and returns the first matching element
What does document.querySelectorAll() take as its argument and what does it return?
Uses a CSS Selector to select all matching elements/id/class
It returns the element
Why do we log things to the console?
To test and communicate with our code to see if it’s working as intended
Debugging and double checking your value
What is the purpose of events and event handling?
This enables the webpage to interact with it’s users
What do [] square brackets mean in function and method syntax documentation?
It means that the arguments are optional
What method of element objects lets you set up a function to be called when a specific type of event occurs?
element.addEventListener(‘eventName’, functionToRun);
What is a callback function?
A function passed into another function as an argument
What object is passed into an event listener callback when the event fires?
The event object which contains all information about that event
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
It is a reference to the object of which the event was dispatched
You google What is event.target mdn
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick);
You’re calling the function with no extra arguments
element.addEventListener(‘click’, handleClick());
You’re calling the function with extra arguments
Avoid this
