DOM Flashcards
Why do we log things to the console?
We could determine what the code is doing and help us debug.
What is a “model”?
copy or representation of something
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?
objects in the model that represent a different part of the page loaded in the window and refers to javascript object.
What is a DOM Tree?
layer of how the browser structure the model.
Give two examples of document methods that retrieve a single element from the DOM.
getElementById(‘id’), querySelector(‘css selector’)
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementByClassName(),
getElementsByTagName(),
querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
to store reference or location of an element you’re trying to retrieve into the variable so browser doesn’t have to keep going back to look for the element.
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?
If the script is at the bottom, the html content can be uploaded first by the browser and then run javascript
What does document.querySelector() take as its argument and what does it return?
takes css selectors as an argument and returns the first matching element.
What does document.querySelectorAll() take as its argument and what does it return?
takes css selectors as an argument and return all the matching elements - nodeList.
Why do we log things to the console?
We log things to check our process and to debug
What is the purpose of events and event handling?
The purpose is to control user input specifically and user interaction by adding dynamic content.
Are all possible parameters required to use a JavaScript method or function?
e
What method of element objects lets you set up a function to be called when a specific type of event occurs?
e
What is a callback function?
when a function is passed into another function as an argument.
What object is passed into an event listener callback when the event fires?
e
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
place where the event occurred.
What is the difference between these two snippets of code?
second one is calling the function, but calling it now and returns undefined since no argument is called.
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?
Get that element from the dom and use new value, assign property
What is the textContent property of element objects?
text inside of that element
How do you update the text within an element using JavaScript?
node.textContent
Is the event parameter of an event listener callback always useful?
By default when event handler functions are executed will pass the event object, so it is not always necessary. However, It is useful for the function to see the event that happened.
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 since there’s no measurement to see when to change the colors
Why is storing information about a program in variables better than only storing it in the DOM?
Storing information in variables allow us to see increments and change of values. For variables, value can change over time, therefore, it is easier to manipulate.
What does the transform property do?
They let you rotate, scale, skew or translate an element
Give four examples of CSS transform functions
rotate, translate, scale, skew, matrix
Does the document.createElement() method insert a new element into the page?
no it does not put it on the page
How do you add an element as a child to another element?
append, appendChild
What do you pass as the arguments to the element.setAttribute() method?
attribute you want to set and
What steps do you need to take in order to insert a new element into the page?
query select and create the element and put it inside the selected element
What is the textContent property of an element object for?
get or set text content
Name two ways to set the class attribute of a DOM element.
setAttribute() , className property, classList property
What are the two advantages of defining a function to do create something (like the work of creating a DOM tree)?
take in data and spit out the result of the data
What is the event.target?
stores where the object originated from
why is it possible to listen for events on one element that actually happen its descendent elements?
because of event bubbling
What DOM element property tells you what type of element it is?
event.target.tagName
what does the element.closest() method take as its argument and what does it return?
selector
How can you remove an element from the DOM?
remove() need to call element that you want to 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?
A
