DOM Flashcards
Dom Querying
Why do we log things to the console?
to make sure the script is loading properly, to check for bugs, make sure everything is working smoothly
Dom Querying
What is a ‘model’?
something recreating (representing) something else
Dom Querying
Which ‘document’ is being referred to in the phrase Document Object Model?
html
Dom Querying
What is the word ‘object’ referring to in the phrase Document Object Model?
it’s referring to different parts of the page loaded in the browser window
Dom Querying
What is a DOM Tree?
an element and all of its configurations
Dom Querying
Give two examples of document methods that retrieve a single element from the DOM
getElementById(‘id’)
querySelector(‘css selector’)
Dom Querying
Give one example of a document method that retrieves multiple elements from the DOM at once
querySelectorAll(‘css selector’)
Dom Querying
Why might you want to assign the return value of a DOM query to a variable?
make it easier to use, otherwise you have to write it out every time
Dom Querying
What console method allows you to inspect the properties of a DOM element object?
console.dir()
Dom Querying
Why would a
tag need to be placed at the bottom of the HTML content instead of at the top?
because the browser needs to parse all the elements in the HTML page before Javascript code can access them
Dom Querying
What does document.querySelector() take as its argument and what does it return?
a string containing one or more css selectors
returns: first element that matches the specified selector or group of selectors
Dom Querying
What does document.querySelectorAll() take as its argument and what does it return?
a string containing one or more selectors
returns a static (not live) nodelist containing one element object for each element that matches at least one of the specified selectors or an empty nodelist (not an array) if there isn’t a match
DOM Events:
Why do we log things to the console?
for this exercise, it was to see when the event fires
for debugging
make sure that script is loading properly
DOM Events:
What is the purpose of events and event handling?
so that users can interact with the web page
DOM Events:
Are all possible parameters required to use a JavaScript method or function?
no
DOM Events:
What method of element objects let you set up a function to be called when a specific type of event occurs?
.addEventListener()
DOM Events:
what is a callback function?
it is a function that is passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action
DOM Events:
What object is passed into an event listener callback when the event fires?
the event object
(it contains information about the event like event type, target element, and the time the event occurred)
DOM Events:
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
the element where the event occurred
you can console.log if you’re not sure
mdn for more info
DOM Events:
what is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
the first is being passed as a callback function
second gets called immediately and doesn’t get to be an event handler, gets replaced by its return
DOM Manipulation:
What is the className property of element objects?
it gets and sets the value of a specific class attribute of a specific element
element.className = ‘attribute’
DOM Manipulation:
how do you update the CSS class attribute of an element using JavaScript?
element.className = ‘classNames’
DOM Manipulation:
What is the textContent property of element objects?
allows you to update text content
DOM Manipulation:
How do you update the text within an element using JavaScript?
node.textContent = ‘text content’
DOM Manipulation:
Is the event parameter of an event listener callback always useful?
no
DOM Manipulation:
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
DOM Manipulation:
Why is storing information about a program in variables better than only storing it in the DOM?
so that you can access and change the information easily?
DOM Creation:
Does the document.createElement() method insert a new element into the page?
no
DOM Creation:
How do you add an element as a child to another element?
.appendChild()
parentElement.appendChild(childElement)
DOM Creation:
What do you pass as the arguments to the element.setAttribute() method?
name of attribute
value you want to assign to that attribute
DOM Creation:
What steps do you need to take in order to insert a new element into the page?
- create the element, use .createElement()
var newEl = document.createElement(‘element’)
2a. give it content, use .createTextNode() or .textContent to give it text
- var name = document.createTextNode(‘text content’)
- newEl.textContent = variable or ‘textContent’
2b. and/or .setAttribute() to give it an attribute and attribute value
newEl.setAttribute(‘attributeName’, ‘attributeValue’) - add it to the DOM, use .appendChild()
variableForParentElement.appendChild(varForChildElement)
DOM Creation:
What is the textContent property of an element object for?
it represents the text content of the element (node)
- use it to assign new textContent to an element
DOM Creation:
Name two ways to set the class attribute of a DOM element.
Element.setAttribute(‘name’, ‘value’)
element.className = ‘value’
DOM Creation:
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
you can use it again in the future
you don’t have to type everything out again when you’re trying to create something
DOM Event Delegation:
What is the event.target?
it is the element the event interacted with
DOM Event Delegation:
Why is is possible to listen for events on one element that actually happen on its descendent elements?
because of bubbling
DOM Event Delegation:
What DOM element property tells you what type of element it is?
event.target
tagName property?
DOM Event Delegation:
What does the element.closest() method take as its argument and what does it return?
it takes a CSS selector
and returns the closest ancestor (parent) element, itself, or null
(opposite of querySelector)
DOM Event Delegation:
How can you remove an element from the DOM?
the remove() method
element.remove()
takes no arguments
DOM Event Delegation:
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?
add the event listener to the parent element
