DOM Flashcards
Why do we log things to the console?
Debugging and anytime we want to know the value a variable holds
What is a “model”?
Any representation of something
Which “document” is being referred to in the phrase Document Object Model?
XML or HTML document that is currently loaded (and all of its info)
What is the word “object referring to in the phrase Document Object Model?
The web page loaded in the current window or tab
What is the DOM tree?
A tree of all of the elements with the document node at its root.
Give two examples of document methods that retrieve a single element from the DOM.
Document.querySelector() & Document.getElementById()
Between Document.querySelector() & Document.getElementById() — which is faster? & why
getElementById b/c it doesn’t have to search
Give one example of a document method that retrieves multiple elements from the DOM.
Document.querySelectorAll (and Document.getElementsbyClass())
What is the difference between querySelectorAll() and getElementsByClass() ?
QuerySelectorAll = nodelist ; getElementsbyClass = HTML collection
Why might you want to assign the return value of a DOM query to a variable?
So you can call and manipulate it later
What console method allows you to inspect the properties of a DOM element object?
The .dir method
Why would a tag need to be placed at the bottom of the HTML document?
You can’t query HTML that isn’t loaded yet
What does document.querySelector() take as its argument and what does it return?
It takes a string with a selector and returns the element that matches that string —> else null
What does querySelectorAll() take as its argument and what does it return?
Takes a selector as a string as argument, returns a nodelist of all elements that match that selector.
What is the purpose of events and event handling?
Create and manage interactivity with the webpage!
Are all possible parameters required to use a JavaScript method or function?
Noooo — only the required ones (sometimes none)
What method of element objects lets you set up a function to be called when a specific type of event occurs?
Document.addEventListener()
What two traits define a callback function?
- A function passed into another function
- We don’t call it — it’s called by something else
What object is passed into an event listener callback when the event fires?
The event object
What is the event.target? If you weren’t sure, how would you check?
It is the element that dispatches the event — we can console.log it — check MDN!
Events have three phases… What are they?
- Capture phase (travel and locate)
- Fire on target (callback (passes in event object)
- Bubbling (bubbles back up to the top of the document)
What is the difference between these two snippets of code?
FunctionOne, FunctionOne()
One runs the function, one is referring to the function definition
What is the className property of element objects?
Gets and sets the value of the class attribute
How do you update the CSS class attribute of an element?
Object.className = ‘class-to-set’;
Object.classList also has various useful methods
What is the textContent property of element objects?
Gets and sets the text content of the node and all its descendants
How do you update the text within an element?
Object.textContent = ‘text-to-set’;
Is the event parameter of an event listener always useful?
It is not always used!
Why is storing information in variables better than storing info in the DOM?
It’s easier to manipulate data into the DOM instead of the other way around — lots of things can affect the DOM
What method is better for adding specific classes or toggling them on and off?
classList.method() —> add, remove, replace, and toggle methods
Why is innerHTML baaaad?
You can see all of HTML —> if somebody is malicious and finds that in your document they can run scripts to pull information from your website. Eval is the same way!
Does the document.createElement( ) method insert a new element into the page?
No — it only creates that element.
How do you add an element as a child to another element?
Use either the .append( ) or .appendChild( ) method
What do you pass as the arguments to the element.setAttribute( ) method?
Two arguments, (attribute, value) —> i.e. (src, “image-path”)
What steps do you need to take in order to insert a new element into the page?
Create the element, add any desired properties, values, class, etc., use .appendChild( )
What is the textContent property of an element object for?
Getter/setter for text content of an item —> it will create the node!
Name two ways to set the class attribute of a DOM element.
className = ‘ ’ ; classList.add/remove/toggle( ) ; setAttribute(‘class’, ‘class-to-add”)
What are two advantages of defining a function to create something like the DOM tree?
- By adding input arguments, you can cut down on time if you have similar html structure
- It allows easy manipulation of those elements because you already have them declared.
- When you update the values, the function will also update the page.
What is the event.target?
The element that dispatched the event (it was interacted with)
Why is it possible to listen for events on one element that actually happens to its descendants?
Bubbling!
What DOM element property tells you what type of element it is?
Event.target.tagName (or event.target.nodeName)
All elements are _____ but not all nodes are _____.
Nodes. Elements.
What does the element.closest( ) method take as its argument and what does it return?
It takes a selector as its argument and returns the closest element (or itself) that matches the selector —> else returns null
How can you remove an element from the DOM?
Use the element.remove( ) method!
If you wanted to insert new clickable DOM elements into the page using JS, how could you avoid adding an event listener to every new element individually?
Add the event listener to the shared ancestor of those elements and when the event bubbles, use the event.target.tagName to determine which element fired the event
