Selecting HTML Element(s)

Notice that we've been selecting a single HTML Element by using 
    var e = document.getElementById("reed");

    ...
    
    e.innerHTML = "hello";
    e.style.color = "red"
    e.style.left = "10px"  // note that it needs to be a string!

    ...
Or a special case where we can select the body 

    document.body.innerHTML = "byeeeeee";
    document.body.style.color = "blue";
    document.body.style.left = "20px";
What if we want to select many things at once (like CSS selectors)?
All the p tags or all HTML elements that are in the CSS class "article"
Notes

Arrays

An array is a type of object used for storing multiple values. It has a name and you an access any item in an array by referencing its numeric index, corresponding to the item's position within the array.

In the figure below, you have an array named "mycart"






You can access each of the compartment by using a numerical index using square brackets after the array name 

  alert(mycart[0]);   //  will print out the string 'tomatoes'
  alert(mycart[2]);   //  will print out the string 'eggs'



To create a new array, you use the new keyword followed by Array() 
  var myArray = new Array();
You can also use a shorthand 
  var myArray = [];
This method allows you to easily create a new array with an initial value, like this: 
  var myArray = ['Monday', 'Tuesday', 'Wednesday'];
You can add elements after the array has been created 
  var myArray = [];
  myArray[0]  = 'Muunday';
  myArray[1]  = 'Tuesday';
  myArray[2]  = 'Wednesday';

  myArray[0]  = 'Monday';

  alert(myArray[0]); // this should print 'Monday'



Notes

Array Methods

Here are some examples of array methods. I suggest you take a look at w3schools for details. 
concat()  -- joins multiple arrays
join()    -- joins all the array elements together into a string
indexOf() -- searches the array for specific elelemt
slice()   -- returns a new array from the specified index and length
sort()    -- sorts the array alphabetically
Some examples of usage... 
var myArray = ['Monday', 'Tuesday', 'Wednesday'];  
var myOtherArray = ['Thursday', 'Friday'];
var myWeek = myArray.concat(myOtherArray);  // join myArray and myOtherArray. Returns ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']

myArray.indexOf('Tuesday'); // returns 1 because it is in the "1st" compartment (counting from 0)
myArray.indexOf('Sunday'); // returns -1 to indicate not found
Notes

How to Iterate Through (= Go through one by one) Arrays

When you have an array you often want to go through every item in the array and do something to it. This is called iterating through an array. There are general purpose loops like the for-loop to do this, but it is hard to grasp. So I will introduce two methods from the textbook.

The first is forEach(). If you just want to iterate through the array, you pass the name of the function you want to use by using the forEach method. Then that function will be called with each of the element of the array as an argument. 

var myArray = [9, 2, 5, 4, 1, 6];

function cube(x){
  console.log(x*x*x);
}

myArray.forEach(cube);

// this should print to the console
// result of cube(9)
// result of cube(2)
/  result of cube(5)
// result of cube(4)
// result of cube(1)
// result of cube(6)
[I'm going to focus on foreach but the text book has other looping methods]

A similar method is for-of. This is intended specifically for looping through iterable structures such as arrays. The syntax is 

for (var y of somearray){
   // do something
   // while it is looping through individual items in the array,
   // the variable y contains the individual item starting from the first 
}
Here is a more concrete example:
  var myArray = [1, 2, 3, 4, 5, 6];

  function cube(x, y){
    console.log(x*x*x + y);
  }

  for(var y of myArray){
    console.log("I see " + y);
    cube(y, 10);
  }
Notes

getting HTML Elements into an array



So far we have limited ourselves to using method that returned a single element.
But, we may want to select multiple HTML elements and this is where document.querySelectorAll() and arrays come in. You can use CSS Selectors as an argument to this method to select multiple HTML Elements. The result is returned as an array. 
  var element01 = document.querySelectorAll(".example"); // selects all HTML Elements with class "example"
  var element02 = document.querySelectorAll("p"); // selects all p element
  var element03 = document.querySelectorAll("div > p"); // selects all p element that is child of div
You can do this but... 
  element01[0].style.backgroundColor = "yellow";
  element01[1].style.backgroundColor = "blue";
Full Example (Not good manual traversal of arrays):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> The Title of this HTML Page </title>
</head>

<body>
<p>paragraph 0</p>
<div class="example">
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
</div>

<div class="example">
<p>paragraph 4</p>
<p>paragraph 5</p>
<p>paragraph 6</p>
</div>

<button onclick="select_all_p();">select all p</button>


<script>



// called when second button is clicked
function select_all_p(){
  // selects the first p element
  var array_of_p = document.querySelectorAll("p");
  array_of_p[0].style.color = "green";
  array_of_p[1].style.color = "green";
  array_of_p[2].style.color = "green";

}



</script>
</body>
</html>
this is not robust coding. You will get an error if the list is empty and you need to know/count exactly how many there are in the list manually.



Full Example using forEach 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> The Title of this HTML Page </title>
</head>

<body>
<p>paragraph 0</p>
<div class="example">
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
</div>

<div class="example">
<p>paragraph 4</p>
<p>paragraph 5</p>
<p>paragraph 6</p>
</div>

<button onclick="select_all_p();">select all p</button>


<script>

function changecolor(p){
  p.style.color = "green";
}

// called when second button is clicked
function select_all_p(){
  // selects the first p element
  var array_of_p = document.querySelectorAll("p");
  array_of_p.forEach(changecolor);
  
}



</script>
</body>
</html>



Let's look at this in a full example [here] 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> The Title of this HTML Page </title>
</head>

<body>
<p>paragraph 0</p>
<div class="example">
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
</div>

<div class="example">
<p>paragraph 4</p>
<p>paragraph 5</p>
<p>paragraph 6</p>
</div>


<button onclick="select_example();">select all members of class example</button>
<button onclick="select_all_p();">select all p</button>

<script>
// the most cryptic but fastest funciton to generate random colors
// in the form of hex numbers #000000 --> #FFFFFF
function getRandomColor(){
  return '#' + ('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6)
}


function changebackground(e){
  e.style.backgroundColor  = getRandomColor();
}


// this gets caleld when first button clicked
function select_example(){
  // selects the All HTML Element with class "example" and assigns the array to a variable named array01
  var array01 = document.querySelectorAll(".example");

  // for each element in the array, apply function changebackground
  // with the individual element as an argument
  array01.forEach(changebackground);

}

</script>
</boody>
</html>
Notes