JavaScript DOM Flashcards
Why do we log things to the console?
To make sure the script is loading properly and to see what we are selecting
What is a “model”?
A “model” is the DOM tree stored in the browser’s memory which houses all the nodes of the web page: most commonly the document node, element nodes, attribute nodes, and text nodes
Which “document” is being referred to in the phrase Document Object Model?
The document node, or the HTML page
What is the word “object” referring to in the phrase Document Object Model?
It refers to the face that the model (the DOM tree) is made of objects
What is a DOM Tree?
A model of the web page that has every element, attribute, and piece of text in the HTML represented by its own DOM node
Give two examples of document methods that retrieve a single element from the DOM.
document.getElementById() and document.querySelector()
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.getElementsByClassName(), document.getElementsByTagName(), and document.querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
If you need to use the same element(s) more than once, so by using a variable, you can store the location of the element(s) which saves the browser looking through the DOM tree to find the same element(s) again. This is knows as “caching” the selection
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 that the page exists and is loaded before subjecting it to DOM manipulation
What does document.querySelector() take as its argument and what does it return?
It takes a css selector as a string as its argument and returns only the first of the matching elements
What does document.querySelectorAll() take as its argument and what does it return?
It takes a css selector as a string as its argument and returns all of those that match
Why do we log things to the console?
To make sure things are as we expect them to be
What is the purpose of events and event handling?
Events specify how the user is interacting with the browser and what’s in it.
Event handling “handles” what happens when an event is triggered, usually triggering some JavaScript code, and has 3 steps: 1. selecting the element node(s) you want the script to respond to 2. indicating which event on the selected node(s) will trigger the response 3. state the code you want to run when the event occurs
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()
What is a callback function?
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action
What object is passed into an event listener callback when the event fires?
The event object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
It is the target property of the event object. You would check it by console.log(event.target)
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
When the interpreter sees the parentheses after a function call, it runs the code straight away, so you want to use the first snippet of code, unless the function needs some information (arguments) to do its job
What is the className property of element objects?
The className property of the Element interface gets and sets the value(s) of the class attribute of the specified element.
How do you update the CSS class attribute of an element using JavaScript?
.className =
What is the textContent property of element objects?
The textContent property of the Node interface represents the text content of the node and its descendants.
How do you update the text within an element using JavaScript?
.textContent =
Is the event parameter of an event listener callback always useful?
Always useful, not always required or necessary
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
Why is storing information about a program in variables better than only storing it in the DOM?
If you need to use the same element(s) more than once, so by using a variable, you can store the location of the element(s) which saves the browser looking through the DOM tree to find the same element(s) again. This is knows as “caching” the selection. Never depend on the DOM tree as it’s dynamic and changing
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 (the change event fires)
What event is fired when a user clicks the “submit” button within a <form>?
The submit event
What does the event.preventDefault() method do?
It prevents the browser from automatically reloading the page with the form’s values in the URL and other default actions.
What does submitting a form without event.preventDefault() do?
The browser will automatically reload the page with the form’s values in the URL
What property of a form element object contains all of the form’s controls.
form.elements
What property of a form control object gets and sets its value?
form.elements[i].value
What is one risk of writing a lot of code without checking to see if it works so far?
You won’t know if, when, or where something is wrong. Makes debugging much harder
What is an advantage of having your console open when writing a JavaScript program?
You can check as you write that things are working as expected in real time
Does the document.createElement() method insert a new element into the page?
No
How do you add an element as a child to another element?
.appendChild()
What do you pass as the arguments to the element.setAttribute() method?
name and value. A string specifying the name of the attribute whose value is to be set and A string containing the value to assign to the attribute
What steps do you need to take in order to insert a new element into the page?
- create the element
- give it content
- add it to the DOM
What is the textContent property of an element object for?
Checking and setting the text content of an element
Name two ways to set the class attribute of a DOM element.
.className and .setAttribute()
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
- It is suited to changing one element from a DOM
fragment where there are many siblings. - It does not affect event handlers.
- It easily allows a script to add elements
incrementally (when you do not want to alter a lot
of code at once).
It’s reusable
What is the event.target?
target property of the event object. It shows the most specific element interacted with in reference to the event object
Why is it possible to listen for events on one element that actually happen its descendent elements?
Event bubbling: The event starts at the most specific node and flows outwards to the most specific one
What DOM element property tells you what type of element it is?
event.target.tagName or event.target.nodeName
What does the element.closest() method take as its argument and what does it return?
It takes a CSS selector as its argument and returns the closest node that matches the specified CSS selector outwards (ancestor)
How can you remove an element from the DOM?
The .remove() method or .removeChild() 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 adding just one event listener its container parent element
What is the event.target?
target property of the event object. It shows the most specific element interacted with in reference to the event object
What is the effect of setting an element to display: none?
It “hides” it and doesn’t show up in the display window and removes it from the document flow
What does the element.matches() method take as an argument and what does it return?
It takes CSS selectors as an argument and returns a boolean of whether the element matches the selectors or not
How can you retrieve the value of an element’s attribute?
The getAttribute() method of the Element interface returns the value of a specified attribute on the element
At what steps of the solution would it be helpful to log things to the console?
All the steps and in between
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?
Target each individual child instead of one parent
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?
Lots of if else statements
