DOM Creation and Event Delegation Flashcards
Does the document.createElement() method insert a new element into the page?
No, but it creates it.
appendChild() method inserts a new element into the page.
How do you add an element as a child to another element?
appendChild()
There is also a .append method
What do you pass as the arguments to the element.setAttribute() method?
Name and Value
h1.setAttribute(‘class’, ‘example’)
What steps do you need to take in order to insert a new element into the page?
Create the element node
Query selector for the parent element
Append the new element to the parent element
What is the textContent property of an element object for?
To pull or modify the text content within the tags of the element
Reading and Writing, Getting and Assigning
Name two ways to set the class attribute of a DOM element.
element. setAttribute(name, value);
element. className = ‘value’
What are two advantages of defining a function to create something (like the work of creating a DOM tree)?
Reusability and Accessibility
It makes it dynamic
What is the event.target?
This is the target element for the event
The target property of the event interface is a reference to the object onto which the event was dispatched
Why is it possible to listen for events on one element that actually happen in its descendent elements?
Because when you interact with the parent element node, it interacts with all children element nodes
Event bubbling
What DOM element property tells you what type of element it is?
event.target.tagName
tagName
What does the element.closest() method take as its argument and what does it return?
It takes the closest parent element and returns the element type
It is a selector. It takes a string as it’s argument in the format of a css selector, and it returns itself or it’s nearest matching ancestor
How can you remove an element from the DOM?
You use to .remove method of the childNode object
If you wanted to insert new clickable DOM elements into the page using JavaScript, how would you avoid adding an event listener to every new element individually?
Event delegation
You can put your eventListener function on the parent element to spy on its children
