DOM Flashcards
Why do we log things to the console?
Powerful tool for debugging and an easy way to inspect your variables in the browser
What is a “model”?
A representation of something
Which “document” is being referred to in the phrase Document Object Model?
HTML document
What is the word “object” referring to in the phrase Document Object Model?
A JavaScript object modeling the HTML document’s content
What is a DOM Tree?
Tree structure of nested nodes (element, text, comment), like a family tree that shows the relationship between parents, children, and siblings.
Give two examples ofdocumentmethods that retrieve a single element from the DOM.
querySelector() - uses a CSS selector, and returns the first matching element
getElementById() - uses the value of an element’s id attribute (which should be unique within the page)
**querySelector() only one needed, consistency
Give one example of adocumentmethod that retrieves multiple elements from the DOM at once.
querySelectorAll() - uses a CSS selector to select all matching elements
getElementsByClassName() - selects all elements that have a specific value for their class attribute getElementsByTagName() - selects all elements that have the specified tag name
Why might you want to assign the return value of a DOM query to a variable?
Caching the selection - If your script needs to use the same element(s) more than once, you can store the location of the element(s) in a variable
Storing the location of the element(s) within the DOM tree in a variable
Whatconsolemethod allows you to inspect the properties of a DOM element object?
console.dir() - displays an interactive list of the properties of the specified JavaScript object, the output is presented as a hierarchical listing with disclosure triangles that let you see the contents of the child objects
Why would atag 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 doesdocument.querySelector()take as its argument and what does it return?
A string containing a CSS selector syntax that would select one or more elements
Returns only the first of the matching elements
What doesdocument.querySelectorAll()take as its argument and what does it return?
A string containing CSS selector syntax to select one or more elements
Returns all of those that match in a NodeList (array-like object)
What is the purpose of events and event handling?
Events -an action that occurs as a result of the user or another source, like a mouse click
Event handing - a routine that deals with the event, allowing a programmer to write code that is executed when the event occurs
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(type, listener, options);
addEventListener(type, listener, useCapture);
What is a callback function?
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 - creates an object from scratch in the moment that contains all the data about that event, unique data about a specific occurrence organized as an object for ease of access to data about that event
What is theevent.target? If you weren’t sure, how would you check? Where could you get more information about it?
The read-only target property of the Event interface is a reference to the object onto which the event was dispatched, where the event originated
Console.log and inspect or MDN
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
handleClick is a callback function that will execute when the event happens
handleClick() executes when that line is parsed and returns a value with no arguments
What is theclassNameproperty of element objects?
Property containing the value of the class attribute on that element 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?
element.className = newValue
What is thetextContentproperty of element objects?
Property that contains the text content of the element
Represents the text content of the node and its descendants
How do you update the text within an element using JavaScript?
element.textContent = newTextContent
Is theeventparameter of an event listener callback always useful?
No