dom-cheatsheet.md

plain DOM

accessing elements

let element = document.getelementById('main');
// or
let element = document.querySelector('#main');

modifying HTML content

element.innerHTML = 'test';

modifying style

element.style.fontSize = '20px';

modifying classes

element.classList.add('important');
element.classList.remove('important');

older solution:

element.className = 'important';

creating elements

document.createElement('div');

adding & removing elements

let element2 = document.createElement('div');
element1.appendChild(element2);
element1.removeChild(element2);

DOM via jQuery

accessing elements

let element = $('#main');

modifying HTML content

element.html('test');

modifying style

element.css('font-size', '20px');

modifying classes

element.addClass('important');
element.removeClass('important');

creating elements

$('<div>');

adding & removing elements

let element2 = $('<div>');
element1.append(element2);
element2.remove();

timeouts & intervals

timeout

setTimeout(
  () => { alert(); },
  1000
);

interval

let i = 0;
setInterval(
  () => {
    alert(i);
    i ++;
  },
  1000
);

clearing an interval

// this code will count to 5, then stop
let i = 1;
let intervalId = setInterval(
  () => {
    alert(i);
    i ++;
  },
  1000
);

setTimeout(
  () => { clearInterval(intervalId); },
  6000
)

browser events

function clickHandler() {
  alert('element1 clicked!')
}

element1.addEventListener('click', clickHandler);