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
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
Complicated
You would have to access the text content in .click-count then split string to access the numeric data
Why is storing information about a program in variables better than only storing it in the DOM?
Better to use data in the same language you are working in
Ease of access for repeated use
Does thedocument.createElement()method insert a new element into the page?
No. When the element node is created, it is not yet part of the DOM tree
How do you add an element as a child to another element?
parentEl.appendChild(childEl);
What do you pass as the arguments to theelement.setAttribute()method?
Name - a string specifying the name of the attribute whose value is to be set
Value - a string containing the value to assign to the attribute
What steps do you need to take in order to insert a new element into the page?
Create new element and store it in a variable | .createElement()
Create a text node and store it in a variable | .createTextNode()
Attach the new text node to the new element | .appendChild()
Find the position where the new element should be added and store it in a variable | .querySelector()
Insert the new element into its position | .appendChild()
What is thetextContentproperty of an element object for?
To get and set the text content for the element
Name two ways to set theclassattribute of a DOM element.
Element.className
Element.setAttribute(name, value)
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
Reusable: use functions more than once and use in different context
What is theevent.target?
A reference to the object onto which the event was dispatched (originated) from
Why is it possible to listen for events on one element that actually happen on its descendent elements?
Event bubbling
What DOM element property tells you what type of element it is?
event.tagName
What does theelement.closest()method take as its argument and what does it return?
Selectors - a string of valid CSS selector to match the element and its ancestors against it
Returns - the closest ancestor element or itself, which matches the selectors, if there are no such element, null
How can you remove an element from the DOM?
Element.remove()
No parameters, no return value (undefined)
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?
Add an event listener to the nearest parent
