getElementsByClassName

In my series of pages relating to the methods used in some of the code that I construct my pages the getElementsByClassName() method is used in my implemetation of an accordian element.

getElementsByClassName() is a selector used in page coding that allows the programmer to select elements by class name.

Background

This page has an error in its name ----- See: Singular vs. Collection. Element Classes have to be selected by an HTML Collection (pseudo array).

It should be getElementsByClassName(), there is no such method getElementByClass() - there is, however, a get_ElementById(). There should be only a single element with an id of a particular name in a Document Object.

document.getElementsByClassName(classname)

Elements should have unique Id's within the same Document Object, you can have multiple instances of a Class Element in a document. An example is the menu buttons styled from ul li tags.

The Method returns an HTML Collection.

What W3C say:

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as an HTMLCollection object.

The .menu class in rwd.css:

The menu that appears at the left on a desktop and at the top of the screen on a mobile has classes:
menu ul, menu li and menu li a

.menu ul {
  position: fixed ;
  top: 100px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 13%;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#E7FEcE; /*#33b5e5; */
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  text-align: center;
}

.menu li a { text-decoration: none; 
display: block;  /* needs this to take up all of width */
}

.menu li:hover { color: #c2144A; background: #E7FEaE; }