DOM 1 Flashcards
Why do we log things to the console?
to see what’s going on in the code and help with debugging
What is a “model”?
replica. when browser loads a web page, it creates a model of the page in memory.
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?
javascript object.
What is a DOM Tree?
the way in which the browser should structure the model. (Model of a web page made of objects)
Give two examples of document methods that retrieve a single element from the DOM.
Document.querySelector(), Document.getElementById()
Give one example of a document method that retrieves multiple elements from the DOM at once.
Document.querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
to save time and be able to access the variable multiple times.
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?
Javascript is often used to manipulate DOM and add new functionality to the webpage. If tag is not added at end of the tag, DOM may not be ready by that time, thus preventing javascript to work on it, leading to unknown behaviors.
What does document.querySelector() take as its argument and what does it return?
it takes CSS selector as parameter and returns the first element within the document that matches the specified selector.
What does document.querySelectorAll() take as its argument and what does it return?
it takes CSS selector as parameter and returns non-live NodeList containing one element object for each element that matches at least one of the specified selectors or an empty NodeList in case no matches.
Why do we log things to the console?
to see what’s going on in the code and help with debugging
What is the purpose of events and event handling?
Event handlers can be used to handle and verify user input, user actions, and browser actions:
- Things that should be done every time a page loads
- Things that should be done when the page is closed
- Action that should be performed when a user clicks a button
- Content that should be verified when a user inputs data
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?
callback function is 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
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The target property of the Event interface is a reference to the object onto which the event was dispatched. MDN.
What is the className property of element objects?
The className property of the Element interface 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?
className property or classList property
What is the textContent property of element objects?
The textContent property of the Node interface represents the text content of the node and its descendants.
How do you update the text within an element using JavaScript?
textContent property or innerHTML property
Is the event parameter 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?
more complicated.
Why is storing information about a program in variables better than only storing it in the DOM?
makes the code unreliable when stored in DOM
what is the difference between two codes?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
in the first code, we are passing in handleclick function as call back function and in the second code, we are just calling the function handleClick; hence in the second code we are returning the result of the function value.
