DOM: Traverse and manipulate

A short reminder about ways to traverse and manipulate DOM elements.

Traversing

.getElementById('id');
.getElementByClassName('class');
.querySelector('selector');
.querySelectorAll('selector');

node.children //[Node list]
node.parentElement
node.closest('selector') //moving upwards until find the target
node.nextElementSibling
node.previousElementSibling

Manipulating

document.createElement('div')

node.append('some string');
node.appendChild(element);

div.innerText = String; //show only what the browser will show you
div.textContent = String //shows exact content including indents and hidden elements
div.innerHTML //add HTML from a string
div.remove() //delete element