I finished studying the Odin Project Web Dev 101 – DOM Manipulation.
Here were the learning outcomes and my answers.
Learning Outcomes:
-
What is DOM in relation to a webpage?
The DOM is the Document Object Model. It is a tree-like structure for the contents of a webpage.
There is a tree of “nodes” with different relationships. Like child or parent.
-
What’s the difference between a “node” and an “element”?
An element is a specific node in the DOM.
A node can include elements, text content inside an element, the document itself, “fragments, and even code comments (the ones that don’t display on the page, like between /* */ in CSS, in HTML, or // in JavaScript).
-
How do you target nodes with “selectors”?
You can use:
- CSS-style selectors.
- Relationship properties.
1. CSS-style selectors for:
- div.display
- .display
- #container > .display
- div#container > div.display
2. Relationship properties (identify nodes based on relationships to nodes around it)
- firstElementChild
- previousElementSibling
You use these selections with a “Query Selector”.
e.g. document.querySelector(“.display”);
- What are the basic methods for finding/adding/removing and altering DOM nodes?
Finding
– Use Query Selectors
Adding
– Create an element and then append it
document.createElement(tagName[, options])
then
parentNode.appendChild(childNode)
Removing
– Remove the node
e.g. parentNode.removeChild(div);
Altering
– Once you have referenced an element, you can add, edit, or remove things from it. Like add CSS styles or remove CSS classes.
E.g.,
To add an inline style of blue:
div.style.color = ‘blue’;
To add a new ID:
div.setAttribute(‘id’, ‘theDiv’); sets the id attribute of our div to theDiv.
- What is the difference between a “nodelist” and an “array of nodes”?
It is a list of nodes. It looks like an array but a nodelist is an object, not an array. You cannot apply the same methods to it as you would to an array.
An array of nodes is when a nodelist is converted into an array, and the regular array methods will work on it.
To convert a nodelist to an array you can use a spread operator ( . . . ) or Array.from().
- How do “events” and “listeners” work? What are three ways to use events in your code?
Event
An event is generally something the computer can react to. Like something that the user does (an input) that can be tracked. Like a mouse click or button press.
Listener
A listener is set up to track when the event happens on a particular DOM node. An event listener listens for this input.
The event listener can be set up so that when it detects that the event has occurred, it runs more code to do something else.
E.g. If the event is a mouse click and the login button is set up with an event listener for mouse clicks. When the user clicks on the login button, the event listener detects that the button has been clicked on, it runs the code for showing the Username and Password input box above the login button.
You can set up these events in three ways:
1. Attaching Scripts to HTML elements as an attribute:
<button onclick=”showUserAndPassBox()”>Login</button>
2. Setting the “on_event_” property on the DOM object in your JavaScript:
// the html file
<button id=”btn”>Login</button>
// the JavaScript file
var btn = document.querySelector(‘#btn’);
btn.onclick = (e) => showUserAndPassBox();
3. Event Listeners in JavaScript:
// the html file
<button id=”btn”>Login</button>
// the JavaScript file
var btn = document.querySelector(‘#btn’);
btn.addEventListener(‘click’, (e) => {
showUserAndPassBox();
});
- How does “bubbling” work?
If you apply an event listener to a piece of code that is embedded in another piece of code, the event listener will apply to the parent element as well.
E.g.,
This is the actual target of the event listener.
If you clicked anywhere on that div it will fire the event listener because it “bubbles” up.
The process is likened to bubbles because events bubble up from the inner element up through parents like a bubble in the water.
It is an efficient method for firing an event on multiple elements — starting from the innermost element — and “bubbling” up to outer elements.
(Note: Not all events bubble and you can stop events bubbling using the event.stopPropagation() method)
rebeccode 