DOM Flashcards
Why do we log things to the console?
Show check if our code is doing what its supposed to be doing; debugging
What is a “model”?
A representation of HTML on a webpage
Which “document” is being referred to in the phrase Document Object Model?
The document is the web page
What is the word “object” referring to in the phrase Document Object Model?
The different parts that the web page is made of
What is a DOM Tree?
A model of a web page made out of objects, with each object representing a different part of the web page
Give two examples ofdocumentmethods that retrieve a single element from the DOM.
querySelector method, getElementById method
Give one example of adocumentmethod that retrieves multiple elements from the DOM at once.
getElementsByClassName method
Why might you want to assign the return value of a DOM query to a variable?
You may need to work with the element more than once, so it makes it easily accessible
Whatconsolemethod allows you to inspect the properties of a DOM element object?
console.dir()
Why would atag need to be placed at the bottom of the HTML content instead of at the top?
The browser needs to parse all of the elements in the HTML page before the Javascript code can access them
What doesdocument.querySelector()take as its argument and what does it return?
It takes a selector for an element as the argument, and returns the first element on the document with that specified selector
What doesdocument.querySelectorAll()take as its argument and what does it return?
It takes a selector for an element and returns a Nodelist of all the elements on the page that match that selector
Why do we log things to the console?
To show that the code is doing what its supposed to be doing and to debug it
What is the purpose of events and event handling?
It gives a response to user input.
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 method
What is a callback function?
A function that is passed into another function as an argument
What object is passed into an event listener callback when the event fires?
The event object
What is theevent.target? If you weren’t sure, how would you check? Where could you get more information about it?
It returns the element that triggered the event. You can log it to the console to find more information about it
What is theclassNameproperty of element objects?
It lets you set a new value for the class attribute for an element
How do you update the CSS class attribute of an element using JavaScript?
Have a new class name assigned to the className property of your chosen element object
What is thetextContentproperty of element objects?
It allows you to get all the text content of that element and update it also
How do you update the text within an element using JavaScript?
Have some string text assigned to the textContent property of you chosen element object
Is theeventparameter 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?
Would have been a lot more steps
Why is storing information about a program in variables better than only storing it in the DOM?
You may need to work with the element more than once, so it makes it easily accessible
Does thedocument.createElement()method insert a new element into the page?
It creates a new HTML element but it needs to be appended to the page still
How do you add an element as a child to another element?
Use the appendChild Method and pass the element as the argument
What do you pass as the arguments to theelement.setAttribute()method?
A string for the name of the attribute and a string for the value of the attribute
What steps do you need to take in order to insert a new element into the page?
Create a element and store it in a variable
Use the appendChild Method to attach it to the html
What is thetextContentproperty of an element object for?
It gets the text content of the element and can also set the text content for an element
Name two ways to set theclassattribute of a DOM element.
Use the setAttribute method
Use the className property/method?
Add method of classList
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
You can create a Dom tree for a list of things like an array
It can help with debugging
What is theevent.target?
The element that the event was triggered from
Why is it possible to listen for events on one element that actually happen its descendent elements?
Bc HTML elements nest inside other elements. The event flows from the lease specific node towards the most specific node. Also known as event bubbling.
What DOM element property tells you what type of element it is?
The tagName property
What does theelement.closest()method take as its argument and what does it return?
It takes one of the ancestor elements css selectors as an argument and returns the element that matches that css selector including itself;
Returns null if nothing is found
How can you remove an element from the DOM?
The remove method
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 can add the event listener to the parent element
