Getting Elements

This JavaScript Reference section displays the code for an example program that shows how to get an element.

GettingElements.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      fieldset {
	    width: 500px;
      }
      button {
	    margin-top: 5px;
      }
    </style>
    <script type="text/javascript" src="GettingElements.js"></script></script>
  </head>
  <body>
    <fieldset id="idTrinity">
      <legend>Trinity:</legend>
      <label>Father
        <input class="cFirst" type="checkbox" value="Father">
      </label>
      <label>Son
        <input id="idJesus" type="checkbox" value="Son">
      </label>
      <label>Holy Spirit
        <input class="cLast" type="checkbox" value="HolySpirit">
      </label>
    </fieldset>

    <fieldset id="idEvangelists">
      <legend>Evangelists:</legend>
      <label>Matthew
        <input class="cFirst" name="person" type="checkbox" value="Matthew">
      </label>
      <label>Mark
        <input name="person" type="checkbox" value="Mark">
      </label>
      <label>Luke
        <input name="person" type="checkbox" value="Luke">
      </label>
      <label>John
        <input class="cLast" name="person" type="checkbox" value="John">
      </label>
    </fieldset>

    <button type="button" onclick="fnAlternateAll()"
        name="AlternateAll">Alternate All</button>
    <button type="button" onclick="fnAlternateTrinity()"
        name="AlternateTrinity">Alternate Trinity</button>
    <button type="button" onclick="fnAlternateFirst()"
        name="AlternateFirst">Alternate First</button>
    <button type="button" onclick="fnAlternateEvangelists()"
        name="AlternateEvangelists">Alternate Evangelists</button>
    <br />
    <button type="button" onclick="fnAlternateVeryFirst()"
        name="AlternateVeryFirst">Alternate Very First</button>
    <button type="button" onclick="fnAlternateLast()"
        name="AlternateLast">Alternate Last</button>
  </body>
</html>

GettingElements.js

function fnAlternateElements(qaInputElements) {
  for (var qInput of qaInputElements) {
    qInput.checked = (!qInput.checked);
  }
}
function fnAlternateAll() {
  // Select All of the input elements
  var qaInputElements = document.getElementsByTagName("input");
  fnAlternateElements(qaInputElements);
}
function fnAlternateTrinity() {
  // Select the trinity fieldset element via its id
  var qaTrinityFieldset = document.getElementById("idTrinity");
  // Use this to select only the input elements inside it
  var qaInputElements = qaTrinityFieldset.getElementsByTagName("input");
  fnAlternateElements(qaInputElements);
}
function fnAlternateFirst() {
  // Use the class selector to select the first element in each set
  var qaInputElements = document.getElementsByClassName("cFirst");
  fnAlternateElements(qaInputElements);
}
function fnAlternateEvangelists() {
  // Use the class selector to select the first element in each set
  var qaInputElements = document.getElementsByName("person");
  fnAlternateElements(qaInputElements);
}
// Note: querySelector selects only the first element of the set
function fnAlternateVeryFirst() {
  // Use the type selector to select the very first element only
  var qaInputElement = document.querySelector("input");
  qaInputElement.checked = (!qaInputElement.checked);
}
// Note: querySelectorAll selects all of the elements
function fnAlternateLast() {
  // Use the class selector to select the last element in each set
  var qaInputElements = document.querySelectorAll(".cLast");
  fnAlternateElements(qaInputElements);
}

Core JavaScript

Getting Elements

GettingElements.html

GettingElements.js

Output