JavaScript Dom Flashcards
Does the document.createElement() method insert a new element into the page?
No it does not.
How do you add an element as a child to another element?
parentElement.appendChild( childElement )
What do you pass as the arguments to the element.setAttribute() method?
strings,
the first is the attribute name and the value of the attribute
What steps do you need to take in order to insert a new element into the page?
var newEl = document.createElement() - create the element
var parentEl = document.quereySelector() - query the dom for the parent element to attach to
parentEl.appendChild(newEl) - add new el to parent el as a child of it
What is the textContent property of an element object for?
get and sets the text content of the element’s DOM node
Name two ways to set the class attribute of a DOM element.
.className method
.setAttribute( ‘class’, ‘className’)
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
We can reuse the function where we want a similar DOM tree structure.
Don’t have to rewrite code to create an element, can just use the function.
What is the event.target?
the element that was most immediately interacted with
Why is it possible to listen for events on one element that actually happen its descendent elements?
Events occur starting from the most specific node bubbling outwards to least specific node.
What DOM element property tells you what type of element it is?
tagName - returns element as a string in full CAPS
event.target.tagName
How can you remove an element from the DOM?
remove() method
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?
Add it to the parent element containing each child DOM element, and do work when the event comes from specified element
What does the element.closest() method take as its argument and what does it return?
Takes a CSS selector as as string as an arg and returns the first ancestor element that matches that selector
