1. HTML DOM: Organizes a web-page into a tree based on the html markup elements
    1. Each markup element is a node in the tree
    2. Nodes may contain text content that can be accessed via the .innerHTML property
    3. The document variable contains a pointer to the dom object created by the web browser

  2. Methods for retrieving content from the DOM. Note that document starts the search from the root of the DOM. You can replace document with any element node in the tree, and then the search will begin from that node instead.

    MethodDescription
    document.getElementById('question1') Finding an element by the id attribute
    document.getElementsByClassName('multipleChoice') Finding elements by the class attribute name
    document.forms['reservations'] Finding elements by HTML form name.
    document.getElementsByTagName("p") returns a Nodelist with all nodes whose markup tag is "p". You can iterate through a node list using a for loop: 
    paraList=document.getElementsByTagName("p");

for (i=0; i < paraList.length; i++)
{
    document.write(paraList[i].innerHTML);
    document.write("<br />");
}
    document.querySelector()returns the first element found in the DOM that matches the CSS selector passed as the method's parameter. For example: 
    	    document.querySelector('#nameTable')

    1. The following html items are available via the following named arrays

      • document.anchors: these are the URLs specified in <a> tags
      • document.forms
      • document.images
      • document.links: these are the resources, such as css style sheets, that are imported in the head block via the <link> tag. Don't confuse these "links" with the links embedded in anchor tags.

  3. Changing HTML elements

    MethodDescription
    document.write(text) Writing into the HTML output stream.
    • Only use this command when loading the html page and creating dynamic html content.
    • Do not use this command after the page is loaded, since it destroys the dom tree and replaces it with whatever text you output using the write method
    • Example: 
      <body>
<script>
document.write(Date());
</script>
</body>
    document.getElementById(id).innerHTML= changes the text contents of an element--use other methods to modify the dom structure. For example: 
    document.getElementById('question1').innerHTML = "New Question!";
    document.getElementById(id).attribute= Changes the attribute's value. For example: 
    document.getElementById("image").src="landscape.jpg";
    document.getElementById(id).style.attribute= Changes the CSS style of an HTML element: allows you to enable/disable form elements, change label's colors, etc. For example: 
    document.getElementById("p2").style.color="blue";
document.getElementById("beneficiary").style.disabled = false;

  4. Adding and deleting elements from the DOM

    MethodDescription
    document.createElement(tagname) Create an HTML element with the given tagname. For example: 
    var newParagraph = document.createElement("p");
    parent.insertBefore(newElement, target) Inserts newElement before target. target becomes the next sibling for newElement. parent is the node that is target's parent.
    parent.appendChild(node) Add an HTML element as the last child for the parent element
    parent.replaceChild(newChild, oldChild) replace the HTML element represented by oldChild by the HTML element represented by newChild
    parent.removeChild(child) Remove an HTML element from the parent element

  5. Adding event handlers

    MethodDescription
    document.getElementById(id).onclick=function(){code} Adding event handler code to an onclick event. For example, the following fragment turns the header to red when the button is clicked: 
    <h1 id="id1">My Heading 1</h1>
<button type="button" id="BigRed"
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>
    Functions can be assigned to events using the HTML DOM as well: 
    document.getElementById('BigRed').onclick=function() {
    document.getElementById('id1').style.color = 'red' }

  6. Navigating the DOM

    1. You can use the following node properties to navigate between nodes with JavaScript:

      • parentNode
      • childNodes[nodenumber]
      • firstChild
      • lastChild
      • nextSibling
      • previousSibling
      • document.body: Gives you access to the root of the body of the document
      • document.documentElement: Gives you access to the root of the entire document, including the head element

    2. When you navigate nodes in this manner, and you reach an element such as <p> that you think contains text, be careful. The node representing the tag <p> does not contain text itself. Instead it contains a single child which is a text node. It is this text node that contains the text content for the paragraph. .innerHTML provides a shorthand way to modify this text node. You can then use the <p> node directly: 
      	node.innerHTML = "New text"
      You can also change the value by accessing the text node directly and then modifying its nodeValue property: 
      	node.firstChild.nodeValue = "New text"
      Technically you should use nodeValue because it is in the www standard and is guaranteed to always work. .innerHTML is an informal browser add-on that is supported by all the major browsers. Personally I use .innerHTML because it is more succinct.

Modifying the HTML DOM

The following mock html document will be the one we manipulate in the examples presented in this section:

<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> Here are several examples of adding a new element:
  1. To add a new element at the end of the div: 
    <script>
var para=document.createElement("p");
var para.innerHTML = "This is new.";

var element=document.getElementById("div1");
element.appendChild(para);
</script>
    You might also see older code that inserts a new node the following way: 
    var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
...

  2. To add the new element before another element: 
    var parent = document.getElementById("div1");
var sibling = document.getElementById("p1");
parent.insertBefore(para,sibling);

  3. To replace an old element with the new element: 
    var parent = document.getElementById("div1");
var oldChild = document.getElementById("p1");
parent.replaceChild(para, oldChild);
  4. If you want to completely replace the contents of an element (e.g., a div) with new contents, then you can also assign a string containing your HTML markup to the element's innerHTML property and the browser will properly parse the new content into a subtree and replace the old content with the new content. For example: 
    var parent = document.getElementById("div1");
parent.innerHTML = "<p id='p1'><b>New Content!</b></p>";

For your project you will need to add a new row to the Assessments when the user presses the "New" button. Here is a simple example of how to add a row to a table: 

<head>
  <style>
    table, td, th {
    border-collapse: collapse;
    border: 1px black solid;
    }

    th, td { padding: 5px }
  </style>
  
  
  <script>
    function handleClick() {
      let rowContent = "<tr><td>Brad</td><td>Vander Zanden</td><td>Knoxville, TN</td></tr>";
      let tableRef = document.getElementById('nameTable').getElementsByTagName('tbody')[0];

      let newRow = tableRef.insertRow();
      newRow.innerHTML = rowContent;
    }
  </script>
</head>

<h2>Adding A Row to a Table </h2>
<table id="nameTable">
  <tr><th>First Name</th><th>Last Name</th><th>Address</th></tr>
  <tr><td>Wily</td><td>Coyote</td><td>Looney Tunes</td></tr>
</table>
<p>
<button type="input" onclick="handleClick()">Add Row!</button>