Sample HTML:

<ol>
  <li id = "one" class = "fruit"> <em> Java </em> Plum </li>
  <li id = "two" class = "fruit"> Olives </li>
  <li id = "three" class = "fruit"> Custard-Apple </li>
  <li id = "four" class = "fruit"> Gooseberry </li> 
</ol>

Select an individual element node

var el = document.getElementById ("one");               // Java Plum
or 
var el = document.querySelector ("li.fruit");           // Java Plum
or
var els = document.getElementsByTagName ("li").item(0); // Java Plum

Select multiple elements (node lists)

var els = document.getElementsByClassName ("fruit"); // find fruit items
or 
var els = document.getElementsByTagName ("li"); // find li elements
or
var els = document.querySelectorAll ("li.fruit"); // find array of elements

Usage:
if (elements.length > 0) {  
   var el = elements [0];   
   el.className = "cool";   
}

Traversing between Element Nodes

// PREVIOUS & NEXT SIBLING
var startItem = document.getElementById ("two");
var prevItem = startItem.previousSibling;
var nextItem = startItem.nextSibling;

// FIRST & LAST CHILD
var startItem = document.getElementById ("two");
var firstItem = startItem.firstChild;
var lastItem = startItem.lastChild;

Work with those elements

+ Access & Update Text Nodes

var itemTwo = document.getElementById ("two");  // Get second list item
var elText = itemTwo.firstChild.nodeValue;      // Get its text content
elText = elText.replace ("Olives", "Banana");   // Change Olives to Banana
itemTwo.firstChild.nodeValue = elText;          // Update the list item

+ Work with HTML Content

// Store the first item in a variable
var firstItem = document.getElementById ("one");
// Get the content of the first list item
var itemContent = firstItem.innerHTML;
// Update the content of the first list item so it is a link 
firstItem.innerHTML = '<a href="http://google.com.vn">' + itemContent + '</a>';

Note: textContent shows only text of parent Element and innerText shows all text of parent Element and nested children Elements.

var firstItem = document.getElementById("one");  // find the first item
var showTextContent = firstItem.textContent;      // get value of textContent
var showInnerText = firstItem.innerText;          // get value of innerText

+ Adding elements to the DOM tree.

// Create a new element and store it in a variable.
var newEl = document.createElement ("li");

// Create a text node and store it in a variable.
var newText = document.createTextNode ("tea");

// Attach the new text node to the new element.
newEl.appendChild (newText);

// Find the position where the new element should be added.
var position = document.getElementsByTagName ("ol")[0];

// Insert the new element into its position.
position.appendChild (newEl);

Hello world

// Check and get value
var firstItem = document.getElementById ("one"); // Get first list item
if (firstItem.hasAttribute ("class")) {
  var attr = firstItem.getAttribute("class");
}

// Create and change attribute
var el = document.getElementByTagName ("li").item (3); // Get the fourth item
el.setAttribute ("class", "cool");                     // Add an attribute to it

// Remove
if (el.hasAttribute ("class")) {
  el.removeAttribute ("class");
}

+ Inline Style CSS

// Adds the indicated style rule
div.style.color = "blue";

// Adds several style rules
div.style.cssText = "color: blue; background: white";

// Adds several style rules
div.setAttribute = ("style", "color: blue; background: white");

+ Work with Classes (classList)

// Adds class "new" to your new div
div.classList.add ("meal");

// Remove "new" class from div
div.classList.remove ("meal");

// If div doesn't have class "isActive" then add it, or if it does, then remove it 
div.classList.toggle ("isActive");