DOMS Flashcards
What is a “model”?
a representation of an actual thing
Which “document” is being referred to in the phrase Document Object Model?
a model of the HTML document that gets loaded to the browser as a javascript object
What is the word “object” referring to in the phrase Document Object Model?
each html element node. Has its own methods and properites and can be identified with element name id/class
What is a DOM Tree?
the tree comprised of nodes with html elements and its classes
Give two examples of document methods that retrieve a single element from the DOM.
document. querySelector() –> use this one
document. getElementByID()
Give one example of a document method that retrieves multiple elements from the DOM at once.
document. ->
getElementsByClassName()
getElementsByTagName()
querySelectorAll() –> use this one
Why might you want to assign the return value of a DOM query to a variable?
to recall it later
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 browser needs to parse all of the elements in the HTML page before the JavaScript code can access them.
What does document.querySelector() take as its argument and what does it return?
What does document.querySelectorAll() take as its argument and what does it return?
querySelector() -> string class, id, element but only returns the first match -> only returns one
querySelectorAll() -> css selector -> returns all that match
What is the purpose of events and event handling?
Events are actions or occurrences that happen in the system you are programming, which the system tells you about so your code can react to them.
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?
function that is put as an argument
runFunction(function)
What object is passed into an event listener callback when the event fires?
an event listener
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
the DOM object that is listening for the event listener that is specified
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
first one, the function occurs when the add event listener is initiated but second one the handle click is being called immediately bc of the parentheses.
What is the className property of element objects?
changes class name property that is seen in html class= '' <p class="blue"> Text </p> p.className = 'red';
<p> Text </p>
How do you update the CSS class attribute of an element using JavaScript?
change class name using .className
What is the textContent property of element objects?
gets the text of the specified dom object
How do you update the text within an element using JavaScript?
$var.textContent = ‘change text’;
Is the event parameter of an event listener callback always useful?
yes, that is how you initialize the event handling
Does the document.createElement() method insert a new element into the page?
no, just stores a queried object into a variable. it does not add until you append it
How do you add an element as a child to another element?
parent.appendChild( child )
.append( ) allows multiple elemnts to pass all at once
What do you pass as the arguments to the element.setAttribute() method?
.setAttribute( ‘ attribute ‘, ‘ name of attribute ‘)
What steps do you need to take in order to insert a new element into the page?
create element - > .createElement( ‘ element ‘ )
parent.appendChild( ^^)
What is the textContent property of an element object for?
gives or updates value of textcontent
Name two ways to set the class attribute of a DOM element.
.setAttribute( )
.className( )
.classList( )
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
you can reuse that function
cleans up code?
What is the event.target?
the location of which element an event occured in the query that you specified
so if queried div with bunch of buttons your event type can be in those buttons or labels or whatever
Why is it possible to listen for events on one element that actually happen its descendent elements?
because it is within the query that eventlistener is listening into –> within the breadth of listen
What DOM element property tells you what type of element it is?
event.target.tagName
What does the element.closest() method take as its argument and what does it return?
a css selector and returns the closest applicable one going towards document root so inside to outside.
How can you remove an element from the DOM?
queriedElement.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?
just add eventListener to the parent element where you are putting that element and specify that you want the event.target to be that new element.
