DOM Flashcards
Why do we log things to the console?
To check functionality or accuracy of code
What is a “model”?
A representation of something
Which “document” is being referred to in the phrase Document Object Model?
The HTML page or document object
What is the word “object” referring to in the phrase Document Object Model?
Each different part of the page
What is a DOM Tree?
A DOM tree, which is made of the document node, element nodes, attribute nodes and text nodes; or all the HTML elements that make up the page
Give two examples of document methods that retrieve a single element from the DOM.
getElementByID(), querySelector()
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementsByClassName(), getElementsByTagName(), querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
If you need to work with an element more than once
What console method allows you to inspect the properties of a DOM element object?
console.dir()
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
The HTML elements need to be processed before Javascript can access them
What does document.querySelector() take as its argument and what does it return?
Uses a CSS selector and returns the first matching element
What does document.querySelectorAll() take as its argument and what does it return?
Uses a CSS selector to select all matching elements
What is the purpose of events and event handling?
To listen and respond to user interactions
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 function being passed through another function as an argument
What object is passed into an event listener callback when the event fires?
The event object
What is the event.target?
A property of the event object that represents the HTML element that was interacted with and where the event is being dispatched.
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
Having () after a function name will call it regardless of whether there is an event and that returned result is being used in the addEventListener method
What is the className property of element objects?
A property of the Element interface that retrieves or sets the class of the specified element
How do you update the CSS class attribute of an element using JavaScript?
element.className =
What is the textContent property of element objects?
A property of the Element interface that retrieves or sets the text of the specified element
How do you update the text within an element using JavaScript?
element.textContent =
Is the event parameter of an event listener callback always useful?
Yes, to prevent any confusion with other potential events on the page; however, it is not required
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?
Storing allows us to reference the information again rather than rerunning the code to search through the document each time. In addition, the DOM is dynamic, whereas variables are static
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 <form>?
‘submit’
What does the event.preventDefault() method do?
Prevents default actions from happening unless the event is triggered
What does submitting a form without event.preventDefault() do?
The form inputs are reset and the page refreshes
What property of a form element object contains all of the form’s controls?
.elements
What property of a form control object gets and sets its value?
.elements.name.value
Does the document.createElement() method insert a new element into the page?
No, you would have to use .appendChild() or .insertBefore()
How do you add an element as a child to another element?
parent.appendChild(element)
What do you pass as the arguments to the element.setAttribute() method?
element.setAttribute(‘name’, ‘value’)
What steps do you need to take in order to insert a new element into the page?
Create the element, assign content to the element, add/append it to the DOM
What is the textContent property of an element object for?
To retrieve or set text within an element
Name two ways to set the class attribute of a DOM element.
.setAttribute(‘name’, ‘value’); .className = ‘value’; .classList.add(‘value’); .classList = ‘value’
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
Having a reusable tool to input new data in a standard format
- Reusable, standardization
Give two examples of media features that you can query in an @media rule.
screen and print
Which HTML meta tag is used in mobile-responsive web pages?
<meta name=”viewport”>
Why is it possible to listen for events on one element that actually happen its descendent elements?
There is event bubbling that allows event listeners to begin from the element where the event took place and then go upwards out to the parent
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?
The argument will represent the criteria of what you are searching for (i.e. class name, element type, etc). It returns the closest ancestor that matches the argument criteria
How can you remove an element from the DOM?
element.remove()
No parameters
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 an event listener to the parent and search for event targets with specified tag names
What is the effect of setting an element to display: none?
Hides the element
What does the element.matches() method take as an argument and what does it return?
Takes in a selector and returns a boolean
How can you retrieve the value of an element’s attribute?
element.getAttribute()
