Document Object Model Flashcards
Why do we log things to the console?
to check our work
What is a “model”?
a recreation used to recreate the HTML page
Which “document” is being referred to in the phrase Document Object Model?
The document node, which includes the whole html itself
What is the word “object” referring to in the phrase Document Object Model?
it refers to each node being an object itself, which are JS objects
What is a DOM Tree?
a model of a webpage consisting of all of the elements and their nodes from parent elements downwards. A DOM tree can be the whole html page or just a small section of it.
Give two examples of document methods that retrieve a single element from the DOM.
queryselector () and getElementByID
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
to refer to it and / or update it later using JavaScript
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?
the browser needs to parse all the elements BEFORE the JS file can access them, so the JS file needs to go on the bottom
What does document.querySelector() take as its argument and what does it return?
it takes in a DOM string and returns an HTML object with the first class/id/name that it finds in your HTML with all its child contents
What does document.querySelectorAll() take as its argument and what does it return?
a DOM string and selectors to match and returns a NODE LIST containing an element object for each element that matches your search query
What is the purpose of events and event handling?
to respond in certain ways, or run certain codes/scripts when a user event happens, such as when they click/type/hover over something
What do [] square brackets mean in function and method syntax documentation?
it means they are optional and can be left out
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?
a function that is passed in as an argument of another function, which will be ran later.
What object is passed into an event listener callback when the event fires?
the function object that was defined prior
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
it means the target that will trigger the event if it was acted on aka it is a reference to the object on which the event was dispatched. event.target gives you all the information about that target. Search MDN for more info if needed.
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
In the first code, the handleClick function will not run until the button is clicked.
The second code is being called right away and handleClick() will run before the button is even clicked by the user.
What event is fired when a user places their cursor in a form control?
focus
What event is fired when a user’s cursor leaves a form control?
blur
What event is fired as a user changes the value of a form control?
input
What event is fired when a user clicks the “submit” button within a ?
submit
What does the event.preventDefault() method do?
stops the browser from implementing its default submit method
What does submitting a form without event.preventDefault() do?
the browser will proceed with its default submission methods, either post or get
What property of a form element object contains all of the form’s controls?
elements property
What property of form a control object gets and sets its value?
value
What is one risk of writing a lot of code without checking to see if it works so far?
the missed errors will stack up, it would be way harder to debug
What is an advantage of having your console open when writing a JavaScript program?
you can check your work step by step if needed!
Does the document.createElement ( ) method insert a new element into the page?
No, it creates it internally
How do you add an element as a child to another element?
AnotherElement.Appendchild ( elementToAdd)
What do you pass as the arguments to the element.setAttribute( ) method?
it takes 2 arguments (‘name of your atr’, ‘value of atr’)
What steps do you need to take in order to insert a new element into the page?
1) create
2) edit content/attribute if needed
3) append to where you want
What is the textContent property of an element object for?
for us to view the text content of that element
Name two ways to set the class attribute of a DOM element.
1) element.setAttribute ( )
2) element.setAttributeNode ( )
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
1) the variables created during the function’s execution will be gone afterwards (save memory)
2) so YOU dont have to create it, saves time and prevent human errors
What is the event.target?
element from where the event was fired
What is the affect of setting an element to display: none?
browser will NOT render the element with that property at all.
What does the element.matches() method take as an argument and what does it return?
it takes a string and returns a boolean
How can you retrieve the value of an element’s attribute?
element.getAttribute
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?
You would need to add an eventListener to each element required individually
Why is it possible to listen for events on one element that actually happen its descendent elements?
by using dom delegation. you can set conditionals to see if the user clicks on any descendent elements
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 a CSS Selector string argument, and returns the element which is CLOSEST to your selected element
How can you remove an element from the DOM?
element.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?
by using dom delegation!
