DOM Manipulation and Events Flashcards
What is the DOM?
The DOM (or Document Object Model) is a tree-like representation of the contents of a webpage - a tree of “nodes” with different relationships depending on how they’re arranged in the HTML document.
What does this do? element.querySelector(selector)
returns a reference to the first match of selector
Eg. const container = document.querySelector(“#container”);
// selects the #container div
What does it do?
element.querySelectorAll(selectors)
returns a “NodeList” containing references to all of the matches of the selectors.
It’s important to remember that when using querySelectorAll, the return value is not an array. It looks like an array, and it somewhat acts like an array, but it’s really a “NodeList”.
One solution, if problems arise, is to convert the NodeList into an array. You can do this with Array.from() or the spread operator.
DOM-
How do we create new element?
document.createElement(tagName, [options]) - creates a new element of tag type tagName. [options] in this case means you can add some optional parameters to the function.
const div = document.createElement(“div”);
This function does NOT put your new element into the DOM - it creates it in memory.
To place the element into the DOM, append element.
How to append elements?
2 ways:
parentNode.appendChild(childNode) - appends childNode as the last child of parentNode.
parentNode.insertBefore(newNode, referenceNode) - inserts newNode into parentNode before referenceNode.
DOM -
How to remove element?
parentNode.removeChild(child) - removes child from parentNode on the DOM and returns a reference to child.
How to alter elements?
When you have a reference to an element, you can use that reference to alter the element’s own properties.
// creates a new div referenced in the variable ‘div’
const div = document.createElement(“div”);
Then can add inline style:
// adds the indicated style rule to the element in the div variable
div.style.color = “blue”;
// adds several style rules
div.style.cssText = “color: blue; background: white;”;
// adds several style rules
div.setAttribute(“style”, “color: blue; background: white;”);
How to add new class?
// adds class “new” to your new div
div.classList.add(“new”);
How to remove class ?
// removes “new” class from div
div.classList.remove(“new”);
How to toggle class (add / remove)?
// if div doesn’t have class “active” then add it, or if it does, then remove it
div.classList.toggle(“active”);
It is often standard (and cleaner) to toggle a CSS style rather than adding and removing inline CSS.
How to create text node containing message and insert it in div?
// creates a text node containing “Hello World!” and inserts it in div
div.textContent = “Hello World!”;
What does the event target in Event Listener mean?
btn.addEventListener(“click”, function (e) {
console.log(e);
});
The e parameter in that callback function contains an object that references the event itself. Within that object you have access to many useful properties and methods (functions that live inside an object) such as which mouse button or key was pressed, or information about the event’s target - the DOM node that was clicked.
How to use e.target in Event Listener?
btn.addEventListener(“click”, function (e) {
e.target.style.background = “blue”;
});
Here, the event target which is the DOM node that was clicked will have the attribute style applied
How to add an event listener to all the buttons?
// we use the .forEach method to iterate through each button buttons.forEach((button) => { // and for each one we add a ‘click’ listener button.addEventListener(“click”, () => { alert(button.id); }); });
