DOM Basics Flashcards
What is the DOM?
document object model - a representation/standardization
can access and change all elements of HTML document
What does
document.querySelector()
return?
returns first element that matches selector
returns null if no matches
How do you modify the text of elements on the DOM?
element.textContent = ‘insert text content here’
What arguments does the addEventListener method take?
event to listen to function to run when event occurs
Give five examples of JavaScript events that can be listened for.
click mousemove dblclick cut copy paste
What does document.createElement() take as its argument?
the element being created
What does document.createElement() return?
DOM element
JS object representing a DOM element
How do you append elements to the DOM?
newElement.appendChild(newContent);
Why do we log things to the console?
so we can see what is going on with our code. checkpoints
Why might you want to assign the return value of a DOM query to a variable?
so you can use it later
its faster because you don’t need to search the document for the items again
What console method allows you to inspect the properties of a DOM element object?
console.dir
What does document.querySelector( ) take as its argument and what does it return?
takes any valid CSS selector and will return the element by name, class or ID
What does document.querySelectorAll() take as its argument and what does it return?
can take any valid CSS selector
returns nodeList
Why would a [script] tag need to be placed at the bottom of the HTML content instead of at the top?
browser needs to parse / load to html – > DOM NEEDS TO LOAD
before js can access them
or else js will result in nulls
Is NodeList an array?
NodeList is NOT AN ARRAY
if you expand, a lot of the array methods are missing from list
are numerically indexed, have length property
thus you can loop through nodeLists
var name for DOM element
$heading
use a $
what is a callback function?
function that we give to another function (we do not call it, we pass it to another function)
What is the purpose of events and event handling?
to handle user input, user actions, and browser actions
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?
callback function
What object is passed into an event listener callback when the event fires?
??
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
target property of the event
can check with console.log(event.target)
will store the element interacted with
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
second one will return undefined
What is the className property of element objects?
sets value of class attribute of specified element
How do you update the CSS class attribute of an element using JavaScript?
- queryselect the DOM element
(var $hotButton = document.querySelector(‘.hot-button’) - use $variable.className = ‘hot-button tepid’;
(no dot notation for .className method)or $variable.className = ‘hot-button’ + temperature;
(assuming var = temperature was declared and assigned)
What is the textContent property of element objects?
how you access the text of an element, regardless of css rules
How do you update the text within an element using JavaScript?
element.textContent = ‘textstring’
Is the event parameter of an event listener callback always useful?
??
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?
so you don’t have to look it up every 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?
parent.appendChild(child);
What do you pass as the arguments to the element.setAttribute() method?
pass arguments as strings
ex/
element.setAttribute(‘class’, ‘class-name’)
or
(‘attribute-name’, ‘attribute-value’)
What steps do you need to take in order to insert a new element into the page?
Create Element
Add attributes (if any)
Add textNode / textContent (if any)
Append child
What is the textContent property of an element object for?
To access or update text content of html element
textContent will create a textNode
Name two ways to set the class attribute of a DOM element.
setAttribute
className
classList add
classList remove
classList toggle
What are two advantages of defining a function to do create something
(like the work of creating a DOM tree)?
functions are repeatable and can be changed as needed easily
functionality is separate and can be switched up or changed as needed
What is the event.target?
element that dispatched the event
point of interaction
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling allows you to listen for events on parent and still detect events in its children (it bubbles up)
What DOM element property tells you what type of element it is?
element.tagName
What does the element.closest() method take as its argument and what does it return?
argument: css selector(s)
returns: the element matching the selectors in argument –> assign to a $variable
(will return itself or closest ancestor)
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?
put event listener on parent and use event delegation to listen to events on children
What is the affect of setting an element to display: none?
it hides the element from view in the browser
it takes element out of normal flow
What does the element.matches() method take as an argument and what does it return?
argument: selectorString
return: boolean value
How can you retrieve the value of an element’s attribute?
element.getAttribute(‘attributeName’)
At what steps of the solution would it be helpful to log things to the console?
at each step
ex/
after event is fired
after each if statement
after each for loop
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?
document.createElement
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?
manually change all views to hidden
then get click event target to view
