DOM-basis

DOM is the Document Object Model.

Targeting nodes with selectors

We could use the selectors target at nodes in the tree of DOM, just like the selectors in CSS;

example:

• div.display
• .display
• #container > .display
• div#container > div.display

DOM methods

When your HTML code is parse by a web browser, it is cconverted to the DOM. Now these nodes are JavaScript objects that have many properties and methods attached to them. These properties and methods are the primary tools we are going to use to manipulate our webpage with JavaScript.

Query selectors

• element.querySelector(selector) - returns a reference to the first mactch of selector.

• element.querySelectorAll(selectors) - returns a “NodeList” containing references to all of the matches of the selectors.

Element creation

• 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. Don’t worry about these at this point.

const div = document.creatElement("div");

Append elements

• parentNode.qppendChild(childNode) - appends childNode as the last child of parentNode.

• parentNode.insertBefore(newNode, referenceNode) - insert nowNode into parentNode before referenceNode.

Remove elements

• parentNode.removeChild(child) - remove child from parentNode on the DOM and returns a reference to child.

Altering elements

To altering the properties of an element, we need to get a reference of it first.

// creates a new div refereced in the variable 'div'
const div = document.creatElement("div");

Adding 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;");

Editing attributes

// if id exists, update it to 'theDiv', else create an id with value "theDiv"
div.setAttribute("id", "theDiv");

// returns value of specified attribute, in this case "theDiv"
div.getAttribute("id");

// removes specified attribute
div.removeAttribute("id");

Working with classes

// adds class "new" to your new div
div.classList.add("new");

// removes "new" class from div
div.classList.remove("new");

// 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.

Adding text content

// creates a text node containing "Hello World!" and inserts it in div
div.textContent = "Hello World!";

Adding HTML content

// renders the HTML inside div
div.innerHTML = "<span>Hello World!</span>";

Events

We could use three methods to complete an event listening operation.

<!-- the HTML file -->
<!-- METHOD 1 -->
<button onclick="alertFunction()">CLICK ME BABY</button>

// the JavaScript file
// METHOD 1
function alertFunciton() {
    alert("YAY! YOU DID IT!");
}

<!-- the HTML file -->
<!-- METHODS 2 & 3 -->
<button id="btn">CLICK ME BABY</button>

// the JavaScript file
// METHODS 2 & 3
function alertFunction() {
    alert("YAY! YOU DID IT!");
}
const btn = document.querySelector('#btn');

// METHOD 2
btn.onclick = alertFunction;

// METHOD 3
btn.addEventListener("click", alertFunction);

Attaching listeners to groups of nodes

This might seem like a lot of you’re attaching lots of similar events listeners to many elements. There are a few ways to go about doing that more efficiently. We learned above that we can get a CodeList of all of the items matching a specific selector with querySelectorAll('selector'). In order to add a listener to each of then, we need to iterate through the whole list, like so:

<div id="container">
    <button id="one">Click Me</button>
    <button id="two">Click Me</button>
    <button id="three">Click Me</button>
</div>

// buttons is a node list. It looks and acts much like an array.
const buttons = document.querySelectorAll("button");

// 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);
    });
});