WHAT THE HECK IS DOM?

Nope, DOM is not the name of an alcohol, but the abbreviation for Document Object Model.  Simply put, it is a massive tree of HTML element objects. For example:

  
    
Paragraph with link to somewhere.
    
This is another paragraph.
    

The document object is the root, and you can perform all sorts of Javascript yoga with it. For example:

document.getElementById("dummy").innerHTML = "This will replace the paragraph text";

GETTING ELEMENTS

There are 4 ways to get elements with DOM:

// Get element by specific ID
var element = document.getElementById("dummy");

// Get all elements with the specified tag name
var elements = document.getElementByTagName("p");

// Get all elements with 
var elements = document.getElementsByClassName("red");

// The query selector, which takes a CSS syntax
// For example, all paragraphs with "red" class
var elements = document.querySelectorAll("p.red");

Of course, you can also get elements within a specific container only.

var container = document.getElementById("dummy");
var elements = container.getElementByTagName("a");

GET/SET ELEMENT TEXT & VALUES

Once we have targeted an element, we can either get or set the internal HTML or values dynamically with Javascript:

// Use innerHTML property to fetch the internal HTML contents
var html = document.getElementById("dummy").innerHTML;

// Use value property to fetch the value of input elements
var val = document.getElementById("in_field").value;

// Simply assign the innerHTML to override the contents
document.getElementById("dummy").innerHTML = "Override contents";

// The same with input elements
document.getElementById("in_field").value = "Override value";

ELEMENT ATTRIBUTES

You can also manipulate the attributes.

// Check if element has a certain attribute
var hasID = document.getElementById("dummy").hasAttribute("id"); // true

// Get the attribute value
var attr = document.getElementById("dummy").getAttribute("id");

// Set/change attribute value
document.getElementById("dummy").setAttribute("id", "new_id");

// Alternatively, you can also change attributes like this
document.getElementById("dummy").id = "new_id";

ELEMENT STYLE & CSS CLASS

The styles are not spared, you can also change them in Javascript.

// You can change a single style
document.getElementById("dummy").style.color = "blue";

// Or you can use the setAttribute to change it all at once
document.getElementById("dummy").setAttribute("style", "color:blue; font-weight:bold;");

// Get the class name(s) - in a single string
var cssClasses = document.getElementById("dummy").className;

// Get the class name(s) - in an array
var cssClasses = document.getElementById("dummy").classList;

// Adding a new CSS class
document.getElementById("dummy").classList.add("style");

// Removing a CSS class
document.getElementById("dummy").classList.remove("style");

// Toggling a CSS class
document.getElementById("dummy").classList.toggle("style");

CREATING & DELETING ELEMENTS

Need to insert a new element or remove one?

// Create a new element
var newPara = document.createElement("p");

// Set the text of the new paragraph
newPara.innerHTML = "This is a new paragraph.";

// Alternatively
var text = document.createTextNode("This is a new paragraph.");
newPara.appendChild(text);

// Append the new element to an existing container
var container = document.getElementById("dummy");
container.appendChild(el);

// If you want to swap out an entire element, use replace
document.body.replaceChild(newPara, container);

// To remove a child element
document.body.removeChild(container);