DOM Flashcards
Why do we log things to the console?
Things are logged to the console for testing and tracking values when running a program.
What is a “model”?
A “model” is a recreation of something.
Which “document” is being referred to in the phrase Document Object Model?
The HTML document.
What is the word “object” referring to in the phrase Document Object Model?
The JavaScript object data type. (JavaScript Objects)
What is a DOM Tree?
The DOM Tree is a model of web page that consists of four types of nodes: document, element, attribute, and text nodes.
Give two examples of document methods that retrieve a single element from the DOM.
document.querySelector();
document.getElementByID();
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.getElementsByTagName();
document.querySelectorAll();
Why might you want to assign the return value of a DOM query to a variable?
You may need to work with the query more than once.
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?
So the content of the web page can be loaded first.
What does document.querySelector() take as its argument and what does it return?
A string representing the CSS selector. It returns the first element that matches the selector.
What does document.querySelectorAll() take as its argument and what does it return?
A string representing the CSS selector. It returns a node list of matching elements.
Why do we log things to the console?
Things are logged to the console for testing and tracking values when running a program.
What is the purpose of events and event handling?
Events notify the program of any changes that may affect the code. Event handling takes place when an event takes place.
Are all possible parameters required to use a JavaScript method or function?
No. Many are optional.
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 passed into another function as an argument which is invoked inside the outer function.
What object is passed into an event listener callback when the event fires?
The event object which contains all the data about the event.
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The event.target is whatever element the event occurred at.
Log the event.target to the console.
MDN.
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
The first snippet passes the callback function as a parameter to the method.
The second snipped passes the return of the function as a parameter to the method.
What is the className property of element objects?
The className property gets the or sets the value of the class attribute in the element.
How do you update the CSS class attribute of an element using JavaScript?
By assigning the new value to the className property of the element object.
What is the textContent property of element objects?
The textContent property gets the or sets the value of the text content in the element.
Is the event parameter of an event listener callback always useful?
The event parameter is not always useful because sometimes you want to make an event handler for one specific element only.
Makes it clear that it’s an event handler.
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
The assignment would be more complicated because there would be no easy way to concatenate an updated value to the paragraph element.
Why is storing information about a program in variables better than only storing it in the DOM?
Storing information in variables allow for more flexible DOM manipulation or additional calculation.
What event is fired when a user places their cursor in a form control?
The focus event.
What event is fired when a user’s cursor leaves a form control?
The blur event.
What event is fired as a user changes the value of a form control?
The input event.
What event is fired when a user clicks the “submit” button within a form?
The submit event.
What does the event.preventDefault() method do?
The method prevents the default action of the event form taking place.
What does submitting a form without event.preventDefault() do?
The webpage will refresh and the console will reset.
What property of a form element object contains all of the form’s controls.
The elements property of the form object.
What property of a form control object gets and sets its value?
The value property.*
What is one risk of writing a lot of code without checking to see if it works so far?
Increased difficulty in finding where the error(s) occurred.
What is an advantage of having your console open when writing a JavaScript program?
Values can be tracked for any errors.
Does the document.createElement() method insert a new element into the page?
No, the method just creates the element.
How do you add an element as a child to another element?
The .appendChild() method.
What do you pass as the arguments to the element.setAttribute() method?
The name of the attribute and the value of the attribute.
What steps do you need to take in order to insert a new element into the page?
- Create the element
[.createElement()] - Add attributes or text content if needed
[.setAttribute() or .textContent] - Add element to the parent element if needed
[.querySelect() or .appendChild()]
What is the textContent property of an element object for?
To get or set the content between the element’s opening and closing tag.
Name two ways to set the class attribute of a DOM element.
.className or .setAttribute()
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
The function can be reused and the return of a function can be use din other parts of the program.
What is the event.target?
A property that returns the HTML element that the event originated from.
Why is it possible to listen for events on one element that actually happen its descendent elements?
Event Bubbling which starts at the the most specific node and flows outward.
What DOM element property tells you what type of element it is?
The event.target.tagName property.
What does the element.closest() method take as its argument and what does it return?
The method takes a selector in the form of a string as an argument and it returns the closest ancestor element.
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?
By applying the event listener to the parent element and checking if the event was triggered by the new element.
(Event delegation)
What is the event.target?
A property that returns the HTML element that the event originated from.
What is the affect of setting an element to display: none?
The element it is applied to will no longer appear but is not deleted.
What does the element.matches() method take as an argument and what does it return?
The method takes a selector in the form of a string as an argument and it returns a Boolean value.
How can you retrieve the value of an element’s attribute?
The .getAttribute() method.
At what steps of the solution would it be helpful to log things to the console?
After writing the event listener: Checking to see whether clicking on a tab is firing off the event.
After writing the for loops to update the classes: Checking to see whether the class for the clicked tab is set to active.
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?
Additional code would be required to update the class attribute values for the new tab and its data.
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?
A long if-else statement.
