DOM Flashcards
Why do we log things to the console?
To check if we got the desired results.
What is a “model”?
An example of something
Which “document” is being referred to in the phrase Document Object Model?
The HTML document / whatever DOCTYPE is being declared
What is the word “object” referring to in the phrase Document Object Model?
- JavaScript objects
- Represents different parts of the page that is loaded
- The document represented as a large object that holds all info about its content
What is a DOM Tree?
The model of the HTML webpage as a tree of objects.
Give two examples of document methods that retrieve a single element from the DOM.
getElementByID: Selects an element by a specified ID
querySelector: CSS selectors
Give one example of a document method that retrieves multiple elements from the DOM at once.
- querySelectorAll
- getElementsByClassName
- getElementsByTagName
Why might you want to assign the return value of a DOM query to a variable?
Saves the browser time looking for the element again. Also makes it easier to reuse.
What console method allows you to inspect the properties of a DOM element object?
console.dir(): Selects an element by specifying the ID
Why would a
tag need to be placed at the bottom of the HTML content instead of at the top?
The browser needs to access all elements of the HTML page before the JavaScript code can access them.
What does document.querySelector() take as its argument and what does it return?
It takes CSS selectors and returns the first element that matches that selector/group of selectors.
What does document.querySelectorAll() take as its argument and what does it return?
It takes CSS selectors and returns a NodeList with a list of the document’s elements that match the specified group of selectors.
What is the purpose of events and event handling?
Events can be selected for event handling to trigger code that responds to users.
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 call back is when a function is passed into another function as an argument.
- A function that you don’t call but is called when an event occurs.
- ex) $hoverButton.addEventListener - when mouseover happens, the function handleMouseover fires
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? Where could you get more information about it?
- Can find more info on MDN
- A reference to the object where the event is occurring.//object that triggered the event
- Can be checked by console.log
- The element that the user interacts with
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
No ()= function only runs when event is fired.
- A callback function// The definition of the function
- When using an addEventListener, the function should always be a callback function
() = The function with no parameters. . Will run the function before the page finishes loading., instead of when the event occurs.
What is the className property of element objects?
The class attribute of the object.
How do you update the CSS class attribute of an element using JavaScript?
Using the className property of the element object and assigning a value.
What is the textContent property of element objects?
The text content of the node and its descendants.
How do you update the text within an element using JavaScript?
Using the textContent property of the object and assigning a value with an assignment operator.
Is the event parameter of an event listener callback always useful?
No
