Document Object Model (DOM) Flashcards
Why do we log things to the console?
To know what our code is doing at a given time
What is a “model”?
It’s a representation of something else or a guideline or a blueprint
Which “document” is being referred to in the phrase Document Object Model?
HTML file
What is the word “object” referring to in the phrase Document Object Model?
The model is made up of object data types (ie. windows object, document object, element objects)
What is a DOM Tree?
It is an element plus all of its elements.
Give two examples of document methods that retrieve a single element from the DOM.
.getElementById()
.querySelector()
Why might you want to assign the return value of a DOM query to a variable?
It saves the browser looking through the DOM tree to find the same elements again. It’s caching the selection. It is storing the location of the node.
Why might you want to assign the return value of a DOM query to a variable?
It saves the browser looking through the DOM tree to find the same elements again. It’s caching the selection. It is storing the location of the node. It also allows you to edit it afterward.
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
In order to parse through all of the information on the webpage so it can access them
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
In order to parse through all the HTML information on the webpage so the DOM can access it.
What does document.querySelector() take as its argument and what does it return?
takes on a selector and returns an element.
What does document.querySelectorAll() take as its argument and what does it return?
all selectors and returns ever static NodeList-(list of nodes)
What can DOM do?
change all the HTML elements in the page,
change all the HTML attributes in the page,
remove existing HTML elements and attributes,
add new HTML elements and attributes,
JavaScript can react to all existing HTML events in the page,
JavaScript can create new HTML events in the page.
getElementById()
Uses the value of an elements id attribute (which should be unique within the page).
querySelector()
Uses a CSS selector and returns the first matching element.
getElementsByClassName()
selects all elements that have a specific value for their class attribute.
getElementsByTagName()
Selects all elements that have the specified tag name.
querySelectorAll()
Uses a CSS selector to select all matching elements
parentNode
Selects the parent of the current element node
previousSibling/nextSibling
Selects the previous or next sibling from the DOM tree
firstChild/ lastChild
Select the first or last child of the current element.
$
Indicator that this holds a dom element
Why do we log things to the console?
to see what our code is doing
What is the purpose of events and event handling?
An event is when something happens like a mouse click or a keypress and the purpose of it is to have a more interactive website
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?
This is a function that is passed in through another function as an argument.
What object is passed into an event listener callback when the event fires?
the event object target
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
It is where the even is coming from. I would check the MDN event reference page
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
First one means the first one will be called when fired. The last one is a call back function occurs when the page loads.
What do [] square brackets mean in function and method syntax documentation?
They mean that the arguments are optional. You can leave them out.
What is the className property of element objects?
Is the property on the element interface that 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?
element.NodeReference.className
What is the textContent property of element objects?
represents the text content of the node and its descendants
gets the content of all elements including script and style elements
How do you update the text within an element using JavaScript?
node.textContent
Is the event parameter of an event listener callback always useful?
No it is not
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
It would be way more difficult
Why is storing information about a program in variables better than only storing it in the DOM?
So that it is easier to access
Does the document.createElement() method insert a new element into the page?
no the append child does
How do you add an element as a child to another element?
you use the appendChild()
What do you pass as the arguments to the element.setAttribute() method?
it is a name and a value and the value is automatically turned into a string
What steps do you need to take in order to insert a new element into the page?
- Create the element node
- Create the text node
- Add the text node to the element node
4 . Add the element to the DOM tree
What is the textContent property of an element object for?
update text content by setting or returning the text content of the node and all of its descendants.
Name two ways to set the class attribute of a DOM element.
setAttribute className and classList
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
Your job becomes automated for you.
easier to get information on to the page.
What is the event.target?
The target property of the Event interface is a reference to the object onto which the event was dispatched.
Why is it possible to listen for events on one element that actually happen its descendent elements?
Bubbling occurs where it flows upwards to its ancestors
What DOM element property tells you what type of element it is?
tagName
What does the element.closest() method take as its argument and what does it return?
it takes on a selector and returns the closest node to that parent to that selector
How can you remove an element from the DOM?
remove()
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
you use event delegation on the highest node
What is the event.target?
The target property of the Event interface is a reference to the object onto which the event was dispatched. Most direct
What is the affect of setting an element to display: none?
it no longer is displayed is being removed from document flow.
What does the element.matches() method take as an argument and what does it return?
takes on selector returns a boolean
How can you retrieve the value of an element’s attribute?
getAttribute ()
At what steps of the solution would it be helpful to log things to the console?
during every major step
If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?
eventlistener on every single tab
If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?
if statement for every single item.
