Self-Taught Developer Journal, Day 43: TOP DOM Manipulations and Events Practice Knowledge Check

Today...

Knowledge Check

What is the DOM?
The DOM, or Document Object Model, is a tree-like representation of the contents of a webpage.
How do you target the nodes you want to work with?
You use a combination of CSS-style selectors and relationship properties along with the DOM method, querySelector, to target the nodes you want.
How do you create an element in the DOM?
You use the DOM method, createElement, to create an element in memory.
How do you add an element to the DOM?
You use the DOM methods, appendChild (for adding to a parent node) or insertBefore (for adding a node into a parent and before reference node).
How do you remove an element from the DOM?
You use the DOM method, removeChild.
How can you alter an element in the DOM?
You can alter an element by create a reference to the node using the createElement method.
When adding text to a DOM element, should you use textContent or innerHTML? Why?
You should use textContent because innerHTML is vulnerable to security risks like JavaScript injections.
Where should you include your Javascript tag in your HTML file when working with DOM nodes?
The end of the script or linked to an external file in the head tag. The DOM nodes needs to be parsed and created before any JavaScript DOM methods can execute.
How do events and listeners work?
Events are actions performed on the webpage or DOM. Then listeners are listening for these events to occur and reacting to them.
What are three ways to use events in your code?
Attach function attributes directly on the HTML element, set the "on_event_" property on the DOM object in JavaScript, or attach event listeners to the nodes in your JavaScript
Why are event listeners the preferred way to handle events?
We maintain a separation of concern and can use multiple event listeners.
What are the benefits of using named functions in your listeners?
They are more organized and easier to reuse.
How do you attach listeners to groups of nodes?
Use querySelectorAll to get a group of nodes or nodelist then iterate through them and attach an eventListener to each node
What is the difference between the return values of querySelector and querySelectorAll?
querySelector returns a specific nodes while querySelectorAll returns a nodelist.
What does a nodelist contain?
A nodelist is an Array-like list of nodes.
Explain the difference between capture and bubbling.
Capturing is the top-down selection of elements to the target element while bubbling is the bottom-up selection of elements to the target element. They are both phases of Event Propagation which occurs when an event is performed on the webpage.

Resources

The Odin Project