DOM Flashcards
What is a “model”?
a representation of the HTML Page that includes all html elements, attributes, and text
Which “document” is being referred to in the phrase Document Object Model?
the HTML Page
What is the word “object” referring to in the phrase Document Object Model?
html Elements, attributes, text.
What is a DOM Tree?
It is a model of a webpage that shows all HTML elements, attributes, and text. It looks similar to a family tree.
Give two examples of document methods that retrieve a single element from the DOM.
1) getElementById
2) use a CSS Selector
Give one example of a document method that retrieves multiple elements from the DOM at once.
1) getElementByClassName()
2) getElementsByTagName()
3) querySelector
Why might you want to assign the return value of a DOM query to a variable?
When you need to work with an element more than once. This is called. ‘caching’
What console method allows you to inspect the properties of a DOM element object?
console.dir()
What does document.querySelector() take as its argument and what does it return?
it returns the first Element within the parameters or group of selectors.
document.querySelector(‘selectors’)
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
It is load order, HTML needs to load first, then the javascript so we can access all the Elements and attributes.
Why do we log things to the console?
for debugging and for values
What is the purpose of events and event handling?
It makes the page interactive.
An event means, that something has happend on the page, it can be either triggered by mouse, keyboards, or the UI itself.
An event handling is the process that responds to the even. “Hey this event happened, what should we do about it?”
1) select which node the script is responding to
2) which event on the selected node will trigger the response
3) state the code you want to run when event occurs
What do [] square brackets mean in function and method syntax documentation?
square brackets in document denotes OPTIONAL. can be provided, but doesnt need to be provided.
What method of element objects lets you set up a function to be called when a specific type of event occurs?
element.addEventListener
What is a callback function?
a function passed into another function as an argument.
What object is passed into an event listener callback when the event fires?
It is the event object, which contains all the information of that event.
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
Is the element.target in which the event was dispatched at or originated from. You can find it on MBN
What is the difference between these two snippets of code?
element.addEventListener( ‘click, handleClick);
this is just defining which function needs to be run. when an event happens.
element.addEventListener(‘click’, handleClick());
the ‘function’ portion is going to need to be worked on first. and it will return the value to replace the [handleClick()]
What is the className property of element objects?
this gets and sets the value of the class attribute of the selected element.
How do you update the CSS class attribute of an element using JavaScript?
document.querySelector(‘.class-name’).className = ‘New name’);
What is the textContent property of element objects?
the text 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?
document.querySelector(‘element-selected’).textContent = ‘New text content’;
Is the event parameter of an event listener callback always useful?
it does not always need an event listener
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
This would be a little more complicated. because we would always have to change the text content for each time we clicked it. instead of having an incremental increase to a variable