DOM & JavaScript Flashcards
Why do we log things to the console?
look at values of variables and double check functions
Which “document” is being referred to in the phrase Document Object Model?
refering to the HTML document
What is the word “object” referring to in the phrase Document Object Model?
refering to JavaScript objects
What is a DOM Tree?
Model of web page consisting of all elements used on web page
Give two examples of document methods that retrieve a single element from the DOM.
queryElementById( ) & querySelector( )
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementById( ) & querySelectorAll( )
Why might you want to assign the return value of a DOM query to a variable?
for future references if needed to be used more than once
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?
since the the document loads from top to bottom
What does document.querySelector() take as its argument and what does it return?
takes in a DOM string and returns a string of a css selector
What does document.querySelectorAll() take as its argument and what does it return?
takes in a css selector and returns a node list
Does the document.createElement() method insert a new element into the page?
No, just makes elements
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?
attribute and value ex: (“class”, “contianer”)
What steps do you need to take in order to insert a new element into the page?
- create element 2. give content 3. add it to the dom
What is the textContent property of an element object for?
“get” and “set” textContent
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)?
to reference again (reuse it somewhere else)
What is the event.target?
element where event occured
What is the affect of setting an element to display: none?
Hides element
What does the element.matches() method take as an argument and what does it return?
Boolean
How can you retrieve the value of an element’s attribute?
__element__.getAttrubute( );
Why is it possible to listen for events on one element that actually happen its descendent elements?
Event bubbling
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?
string of CSS selector and returns matching ancestor (parent)
How can you remove an element from the DOM?
_____.remove( )
