The Document Object Model
Last updated:
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');
});