DOM-manipulation

<!doctype html>
<html>
  <head>
    <title>My home page</title>
  </head>
  <body>
    <h1>My home page</h1>
    <p>Hello, I am Marijn and this is my home page.</p>
    <p>I also wrote a book! Read it
      <a href="http://eloquentjavascript.net">here</a>.</p>
  </body>
</html>
Box Model
For each box, there is an object, which we can interact with to find out things such as what HTML tag it represents and which boxes and text it contains. This representation is called the Document Object Model, or DOM for short.

Tänka i TRÄD

tree structure

Dessa är NODER

Tre typer av noder

  • Element node (den vi oftast använder)
  • Text node
  • Attribute node

Oftast hämtar vi ut Element nodes med JavaScript och modifierar dessa.

$('#menu-toggle');

jQuery ger oss en wrapper runt samtliga element selectors

NodeList / HTMLCollection

Det vi får tillbaka är nästan alltid en samling av element som är "Array-like" men inte en faktisk array.

Detta betyder att vi kan loopa igenom element.

Denna samling är nästan alltid Live

<nav id="main-nav">
  <a href="home.html" class="nav-link">Home</a>
  <a href="about.html" class="nav-link">About</a>
</div>
const nav = document.getElementById('main-nav'); // Always one
const links = document.getElementsByClassName('nav-link') //Always multiple;
const links = document.getElementByTagName('a'); //Always multiple

querySelector()

Det närmaste vi kommer jQuery

const nav = document.querySelector('#main-nav');
const links = document.querySelectorAll('.nav-link');
const links = document.querySelectorAll('#main-nav a');

När vi fått tag i elementen måste vi kunna manipulera

<div id="output"></div>
const output = document.getElementById('output');
output.textContent = "Hello FED17";
output.innerText = "Hello FED17, I am the same as above";
output.innerHTML = "<p>text AND html, dangerous 😅<p>";

På samma sätt kan vi skriva ut varje värde

Hello!
const output = document.getElementById('output');
console.log(output.textContent);
console.log(output.innerText);
console.log(output.innerHTML);

Allting som finns i HTML samt CSS kan manipuleras via JavaScript

const byId = document.getElementById('byId');
byId.style.backgroundColor = 'lightsalmon';
byId.style.color = 'teal';
byId.style.fontFamily = 'Comic Sans MS';
byId.textContent = 'Comic Sans YO';
const classes = document.getElementsByClassName('byClass');
for (const oneClass of classes){
 oneClass.style.color = 'red';
}
classes[0].style.color = 'green';
byId
byClass
byClass
byTag

Skapa element och lägg till i DOMen

const div = document.createElement('div');
document.body.appendChild(div);
const p = document.createElement('p');
const text = document.createTextNode('My text!');
p.appendChild(text);
document.body.appendChild(p);

Traversing

  • parentElement
  • children
  • nextSibling
  • previousSibling
  • firstElementChild
  • lastElementChild

Koda koda

Eftermiddag: övningar på zenit / GitHub