// DOM Manipulation Challenge


// I worked on this challenge [with: Nil Thacker].


// Add your JavaScript calls to this page:

// Release 0 aka 1:
document.getElementById("release-0").className = "done";


// Release 1 aka 2:
document.getElementById("release-1").style.display='none';


// Release 2 aka 3:
document.getElementsByTagName("H1")[0].innerHTML = "I completed release 2.";


// Release 3 aka 4:
document.getElementById("release-3").style.backgroundColor = "#955251";


// Release 4 aka 5:
var elements = document.getElementsByClassName("release-4");
var size = elements.length;

for (var i = 0; i < size; i++) {
    var instance = elements[i];
    instance.style.fontSize = "2em";
}


// Release 5 aka 6:
var template = document.getElementById("hidden");
document.body.appendChild(template.content.cloneNode(true));


/* Reflection
// What did you learn about the DOM?



// What are some useful methods to use to manipulate the DOM?



*/
@@ -880,73 +880,2321 @@
 M?%0A%0A
-%0A%0A// What are some useful methods to use to manipulate the DOM?%0A%0A
+    We learned that manipulating things in the DOM ~ %22Document Object Model%22 with %0A    JavaScript needs us to combine our knowledge of JS, HTML, & CSS.  %0A%0A    A lot of the concepts that we learned in HTML and CSS got solidified; for example %0A    %22document.getElementById()%22 does not have an %22s%22 after %22Element%22, because there %0A    can only be 1 ID of that name in an HTML file.  But %22document.getElementsByTagName()%22 %0A    and %22document.getElementsByClassName()%22 have %22s%22 after %22Element%22 because a lot of %0A    classes of the same name can exists simultaneously in an HTML file, and likewise for %0A    a lot of tags of the same kind.  Because %22getElementsByClassName()%22 & %0A    %22getElementsByTagName()%22 have a lot, they are actually arrays of strings and the %0A    element-strings can be accessed by putting the index number in a bracket.  (Does %0A    this mean that we have to count how many things use that class name or tag name %0A    if we want to pick out 1 thing?)  %0A%0A    I think that the reason why JS has no classes is because of the class names in CSS.  %0A    It would be confusing if 2 different things have the same name.  That's why JS uses %0A    prototypes instead.  %0A%0A    But even if someone knows CSS, they are a little different in using JS to manipulate %0A    the DOM.  For example, in CSS, when we want to change the background color of an %0A    element, we use %22background-color%22 with a dash between the words.  But when using JS %0A    to do the same thing, it's %22.style.backgroundColor%22 with a camelCase to put %0A    these 2 words together.  %0A%0A    Also, I learned that compared to ruby-docs or even the documentation for %0A    non-DOM-manipulating JS, the guides for the list of available commands/methods/functions %0A    of manipulating the DOM with JS are really scattered:%0A%0A    We need to go to 2 different websites for the complete list:%0A        - https://developer.mozilla.org/en-US/docs/Web/API/document%0A        - http://www.w3schools.com/jsref/dom_obj_style.asp%0A%0A    But it is probably a learning experience for us about learning how to research more %0A    efficiently.  %0A%0A// What are some useful methods to use to manipulate the DOM?%0A%0A    document.getElementById(%22id-name%22)%0A%0A    document.getElementsByTagName(%22html-tag%22)%0A%0A    document.getElementsByClassName(%22class-name%22)%0A%0A    .appendChild%0A%0A    .style
 %0A%0A*/

Add the the reflection.