How to Access HTML Program Elements in JavaScript

Whether you want to change content, presentation, or interaction, you must gain access to an individual HTML element to do it. For example, if you want to change the caption on a button, you must have access to the button first.

How to modify the output stream

Think of a physical stream when considering streams in a computer system. In a physical stream, individual atoms of water flow from one location to other along a specific path. Likewise, in a computer stream, individual bits of data flow from one location to another along a specific path.

Modifying the output stream means to change the flow of data in the path. You can dam the flow by closing the stream, add a new flow by writing to it, or allow the data flow by opening the stream. The following list describes the functions associated with the output stream:

  • close(): Closes an output stream that was opened using the open() method.

  • open(): Opens a new output stream to receive content from either the write() or writeln() function.

  • write(): Outputs the text you provide to the currently opened stream.

  • writeln(): Outputs the text you provide to the currently opened stream and ends the output with a newline character, which makes the output easier to see when viewing the page source in a browser.

These four functions make it possible to modify the output stream. Here’s an example that combines stream modification with a few other concepts.

<script language="JavaScript">
  // Get the first stylesheet associated with
  // this document.
  var Sheets = document.styleSheets[0];
 
  // Obtain the rules on that sheet.
  var Rules = Sheets.cssRules;
 
  // Display each of the rules onscreen.
  for (var i = 0; i < Rules.length; i++)
  {
   // Obtain a single rule and write the name
   // of that rule onscreen.
   var Rule = Rules[i];
   document.write("<p>" + Rule.selectorText +
           "<br />");
  
   // Obtain a list of styles for the rule.
   var Styles = Rule.style;
  
   // Display each of the styles onscreen.
   for (var j=0; j < Styles.length; j++)
   {
     // Obtain the name of a property.
     var PropertyName = Styles[j];
    
     // Use the property name to locate its value
     // and display both name and value.
     document.write(PropertyName + " : " +
      Styles.getPropertyValue(PropertyName) +
      "<br />");
   }
  
   // End the document rule printout.
   document.write("</p>");
  }
</script>

The example document includes a <style> tag that defines the formatting for various elements. Of course, it would be nice to know how the page is formatted. Each <style> tag associated with a page is one item in the styleSheets property, which you can access using an index.

This page has only one <style> tag so the code accesses it using the styleSheets[0] index. Each CSS style has one or more rules defined for it, which you can access using the cssRules property.

At this point, the example relies on a nested for loop to determine the rule name and each of the styles defined within the rule. A style property consists of a style name and a style value. You must use the style property name to access the value using the getPropertyValue() method.

image0.jpg

You can use the various methods and properties associated with the styleSheets property and its children to modify styles as well as read them.

How to affect HTML content

The whole reason to display a page is to provide content to the viewer. It may seem as if pages are all about formatting, graphics, design elements, and so on, but these items are window dressing for the content that the page provides. The following example shows some simple techniques for changing content on a page.

function ChangeContent()
{
  // Modify the <p> tag.
  document.getElementById("Change1").innerHTML =
  "Changed!";
 
  // Modify the <input> tag.
  document.getElementById("btnChange")
  .setAttribute("value", "Clicked");
}

Even though this example looks simple, it contains everything needed to change content in almost every situation. When working with an HTML element, such as the <p> tag, you use the innerHTML property to make changes. This technique works equally well on <div>, <span>, and <h1> tags.

How to change HTML attributes

Every HTML tag can include two forms of information: content that appears between the beginning and ending of the tag and attributes. The content normally takes the form of text, but it can also include an object, such as a picture, a link to a video, or a sound. Most attributes require specific information. You can generally divide attributes into the following categories:

  • Content: Defines the information that appears onscreen to the viewer.

  • Formatting: Modifies the way that the information appears onscreen. For example, it could add special colors or change the appearance of the font used to display text.

  • Control: Specifies the way in which a user can interact with the content. For example, you can decide that a text box will allow the viewer only to read the content rather than read and write it.

  • Identification: Provides a description or other identifier to other controls or to JavaScript, so that these other entities can uniquely identify the host control.

  • Event: Determines the function used to handle the specific event, such as a user click or the change of content.

The following example shows how to modify various attributes of a page.

function EnableButton()
{
  // Reconfigure btnSecond.
  var Button2 = document.getElementById("btnSecond");
  Button2.removeAttribute("disabled");
  Button2.setAttribute("value", "Change Content");
}
function ChangeP1()
{
  // Now that the second button is enabled, use
  // it to change the <p> tag style.
  var P1 = document.getElementById("p1");
  P1.setAttribute("class", "special");
}

This example has two buttons. At the outset, the first button is disabled. To make the button functional, the user clicks the first button, which calls EnableButton(). To enable the button, the code removes the disabled attribute. The caption for the second button is incorrect at this point. It currently says Disabled, so the code also changes the value attribute to Change Content.

Now that the second button is enabled and has the right caption, the user can click it. The <p> tag currently uses the default CSS style for that tag. To change the text style, the code adds a class attribute using setAttribute() and sets the value to special. Adding the class attribute automatically changes the text form.

image1.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com