Document Object Model (DOM)

1. Overview
   1. DOM is a tree structure of the HTML document displayed in the browser; componsed of nodes
      
2. Document object properties
   1. document is the HTML document being displayed by the browser
   2. lastModified - document's last modified date on the web server

      document.writeln(document.lastModified);    // 08/23/2012 13:38:53
      

   3. title - title of the document
   4. URL - URL of the document
   5. Complete list of properties and methods
3. DOM collections
   1. The DOM contains several collections, groups of related objects on a page
      1. images - All images on the page
      2. links - All links on the page
      3. forms - All forms on the page
      4. anchors - All anchors on the page that use name attribute
   2. Example which swaps out the first image on the web page with another

      document.images[0].src = "newimage.png";
      

   3. Example changing the link target

      <a href="http://www.harding.edu/">3rd link on this page</a>
      

      // Link changed to point to Google's website
      document.links[2].href = "http://www.google.com/";
      

4. Document methods to search the DOM
   1. getElementById('id') - search by ID, returns the element with the same ID or null if not found

      <a href="http://www.harding.edu/" id="mylink">my link</a>
      

      var link = document.getElementById("mylink");
      link.href = "http://www.google.com/";
      

   2. getElementsByTagName('tag') - search by tag, returns a list of elements with the given tag name

      var lineItems = document.getElementsByTagName("li");
      lineItems[0].style.color = "blue";    // Change font color of first <li> to blue
      

   3. getElementsByClassName('class') - search by CSS class name, returns a list of elements with the given class name

      var outlines = document.getElementsByClassName("outline");
      

   4. querySelector('css-selector') - search by CSS selector, returns the first matching element or null if not found

      // Returns first element using "special" class
      var elem = document.querySelector(".special");
      
      // Returns form with id="reg-form"
      var form = document.querySelector("#reg-form");
      

   5. querySelectorAll('css-selector') - search by CSS selector, returns a list of elements that match or null if not found

      // Returns all < div> elements 
      var divs = document.querySelectorAll("div");
      

5. Altering the DOM
   1. innerHTML property to change an element's contents

      var message = document.getElementById("message");
      message.innerHTML = "Something new...";
      

      <!-- Becomes <h1 id="message">Something new...</h1> -->
      <h1 id="message">This is a test</h1>
      

   2. createElement(), createTextNode(), appendChild() methods to create a new DOM node and insertBefore() to add the node to the DOM

      // Create <h1>Greetings!</h1>
      var newHeader = document.createElement("h1"); 
      var newContent = document.createTextNode("Greetings!"); 
      newHeader.appendChild(newContent);
      
      // Add new <h1> before the outline node
      var outline = document.getElementById("outline");
      document.body.insertBefore(newHeader, outline);
      

   3. Remove a DOM node with remove() method

      // Remove entire outline from web page
      var outline = document.getElementById("outline");
      outline.remove();
      

   4. Get/set element attributes using DOM node properties

      // Get link's URL 
      let url = document.getElementById("nasa_link").href;
      
      // Change link's URL
      document.getElementById("nasa_link").href = "https://www.spacex.com/"
      

   5. Remove element attributes with removeAttribute() method

      // Remove target attribute 
      document.getElementById("nasa_link").removeAttribute("target")