Framework - get elements on the DOM

get-elements-from-the-DOM.js

// get elements by id:
document.getElementById('logout-button'); 
// returns single element
// => <button id='logout-button'>Logout!</button> 



// get elements by class name: 
document.getElementsByClassName('order-items'); 
// returns HTML collection of elements
// => [<li class="order-items">JavScripts</li>, <li class="order-items">Codes</li>, <li class="order-items">Coffees</li>]


// get elements by their relationship to other elements:
var logout = document.getElementById('logout-button'); 

logout.parentElement
// returns the element that the logout button is nested within, i.e, 
// <div class="logout-container">(... other elements in here including logout btn)</div>


var navbar = document.getElementById('nav');
navbar.children
// returns an HTML collection of the child elements

navbar.children[0]
// accesses the first child element of navbar