DOM Flashcards
Why do we log things to the console?
for debugging and an easy way to inspect your variables in the browser
What is a “model”?
representation of a person or thing or of a proposed structure, typically on a smaller scale than the original.
Which “document” is being referred to in the phrase Document Object Model?
HTML page
What is the word “object” referring to in the phrase Document Object Model?
javscript objects
What is a DOM Tree?
When the browser loads a web page, it creates a model of the page in memory.
Give two examples of document methods that retrieve a single element from the DOM.
getElementByld(‘id’) , querySel ector(‘css selector’)
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementByClassName
Why might you want to assign the return value of a DOM query to a variable?
It stores the location of that elelment, properties and methods of that element work on the varaiable
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?
linear, has to be at bottom so elements can load first
What does document.querySelector() take as its argument and what does it return?
css selector and returns the first matching element
What does document.querySelectorAll() take as its argument and what does it return?
css selector and returns all matching element
Why do we log things to the console?
for debugging and an easy way to inspect your variables in the browser
What is the purpose of events and event handling?
make webages interactable respond to the actions of the users
What do [] square brackets mean in function and method syntax documentation?
gives an option to use parameters
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addeventListener(‘event’,function, flow = false)
What is a callback function?
A 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?
the event object with a whole lot of information about the current info
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
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
objectname.textContent = ‘new string’;
Why is storing information about a program in variables better than only storing it in the DOM?
more work for the browser
Does the document.createElement() method insert a new element into the page?
creates an element that can be added to the DOM tree
How do you add an element as a child to another element?
appendChild()
What do you pass as the arguments to the element.setAttribute() method?
Element.setAttribute(name, value);
What steps do you need to take in order to insert a new element into the page?
document.createElement , appendChild()
What is the textContent property of an element object for?
property of the Node interface represents the text content of the node and its descendants.
Name two ways to set the class attribute of a DOM element.
setattribute and className property
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
reusability and makes code look cleaner/easy to read
