DOM is a tree‑like representation of the page structure and its content.

Selecting DOM elements

let el = document.querySelector('#elementId');
let el = document.querySelectorAll('a');

Creating new DOM elements

let newElement = document.createElement('a');
newElement.innerHTML = 'Contact me';
newElement.setAttribute('href', '/contact-us');
let parentElement= document.querySelect('#parentId');
parentElement.appendChild(newElement);

Events

Events are created in response to user action (eg: clicking on a link) or when an environment changed occurred.

The event loop

let el = document.querySelector('#elementId');
el.addEventListener('click', function() {
  console.log('#elementID clicked');
});

Event Listeners