Foundations

Beginner information about web development.

DOM

Web browsers parse HTML to create the DOM. The DOM nodes are objects with properties and methods.
Javascript alters the DOM, not the HTML.
element.querySelectorAll() returns a nodelist. This is not an array–it does not have the normal array methods. To convert to an array, use Array.from() or the spread operator.
Use defer to make sure that the HTML is parsed before you manipulate the DOM.

<head>
  <script src="js-file.js" defer></script>
</head>

Add/remove DOM elements

parentNode.appendChild(childNode) - appends childNode as the last child of parentNode.
Append child nodes to the parent element before you append the parent element to the DOM.
parentNode.insertBefore(newNode, referenceNode) - inserts newNode into parentNode before referenceNode.
parentNode.removeChild(child) - removes child from parentNode on the DOM and returns a reference to child.
```
const linkPara = document.querySelector("p");
linkPara.parentNode.removeChild(linkPara);
```

Remove all child elements

If you are creating nodes with Javascript and appending them to a parent (like a contaier), then you need to remove all child nodes before you refresh the elements:

const container = document.querySelector('.grid-container');

while (container.firstChild) {
    container.removeChild(container.firstChild);
}

So, while the container has a first child, remove the first child from the container.

append() vs appendChild()

appendChild() appends a node to the parent’s list of child nodes.
append() inserts a node after the parent node’s last child

Differences	`append()`	`appendChild()`
Return value	`undefined`	The appended Node object
Input	Multiple Node Objects	A single Node object
Parameter types	Accept Node and DOMString	Only Node

CSS

You add styles with JS as inline styles. Inline styles are avialable through the style object on element node objects.
- These style names don’t use hyphens, they use camelCase. Just remove the hyphen and use camelCase.
- Use hyphens if you use bracket notation. For example, div.style['background-color'].

get/set/remove properties

// adds the indicated style rule
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;");

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

classes

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

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

div.classList.toggle("active");
// if div doesn't have class "active" then add it, or if
// it does, then remove it

Text

A text node is the actual text inside an element or attribute.

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

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

Use textContent to add text bc there are security issues with innerHTML.

Data attributes

Web dev simplified post

Events

HTML DOM Events

Add Events in the following 3 ways:

Add function attributes directly to HTML:
```
<button onclick="alert('Hello World')">Click Me</button>
```
This means you can set only one onclick event on the HTML element.
Set properties, like onclick, to the DOM nodes in JS:
```
<button id="btn">Click Me</button>
```
```
const btn = document.querySelector("#btn");
btn.onclick = () => alert("Hello World");
```
You can still only set one onclick property.
getElementById is an older method and is used less today.

Attach event listeners (preferred):

<button id="btn">Click Me Too</button>

const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
  alert("Hello World");
});

The event listener separates concerns, and you can add as many as you want.

Event object

You can get the element that fires the event with e.target. For example:

btn.addEventListener("click", function (e) {
  e.target.style.background = "blue";
});

Listeners on groups of nodes

Grab the elements with querySelectorAll() to get a nodelist.

Use forEach() to add an event listener to all the nodes:

<div id="container">
  <button id="1">Click Me</button>
  <button id="2">Click Me</button>
  <button id="3">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);
  });
});

Objects

Define an object with curly braces and an optional list of properties that are key/value pairs.

Properties

Multiword properties must use quotes:

// you can use a comma after the last property
let user = {
  name: "John",
  age: 30,
  "likes birds": true,
};

Add or remove properties

// add
user.isAdmin = true;

// delete
delete user.age;

Square brackets and properties

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

undefined

If you try to access a property that doesn’t exist, you get undefined:

$ let user = {};
undefined
$ user
{}
$ user.noProp;
undefined

Key in test

$ let user = {name: 'Jake', age: 40};
undefined
$ "name" in user
true
$ "age" in user
true

Create an object

let user = new Object();
let user = {};

The following are equal:

let createUser = (name, age) => {
  return {
    name: name,
    age: age,
  };
};

let createUser = (name, age) => {
  return {
    name,
    age,
  };
};

for…in loop

let user = {
    name: 'Ryan',
    age: 40,
    likes: 'stuff',
}

$ for (let key in user) {
    console.log(key)
}
name
age
likes

If the keys can be converted to or from an integer, then JS automatically orders them. Otherwise, they are listed in the order that you created them:

$ let nums = {
  10: "ten",
  5: "five",
  1: "one",
};


$ for (let key in nums) {
  console.log(key);
}
1;
5;
10;