Getting an Element

The W3C's DOM, or standard DOM, lets you write scripts that can access any element on the screen. This allows you to make changes to any CSS property for an element, so you can control the position and visibility on the screen, as well as appearance. Any changes made in these properties are immediately reflected on the page.

So any changes made in the font, text, list, mouse, color, background, border, margin, position, or visibility of an object are discernible immediately.

Getting an Element by its ID

Almost every time you access the DOM, it will be by using the getElementById() function, the general syntax for which is shown in Figure 12.9. This function, when given a string value for an ID attribute value, will locate that element, if it exists.

Figure 12.9. The general syntax for using the `getElementById()` function, your guide for attaching JavaScript to elements on your Web page.

In this example (Figure 12.10 and Figure 12.11), the getElementById() function is used to identify an element that is then moved slightly across the page by changing its top and left CSS properties.

Figure 12.10. When the page first loads, the object is in one position until the visitor clicks it.

Figure 12.11. The object is moved from its original position, across the screen in response to the function that addresses the object using the `getElementById()` function.

To get an Element by its ID:

function moveObject (objectID, newTop, newLeft) {. . .}

Add a function to your script (Code 12.4). In this example, we will be creating a simple script called moveObject() that will take the ID of an object (objectID) and move it to a new position on the screen (newTop and newLeft).

Code 12.4. Using the `getElementByID()` function, you can find and manipulate the properties of any element that has an ID assigned to it on the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Getting an Element | By ID</title> <script type="text/javascript"> function moveObject (objectID, newTop, newLeft) {      var object = document.getElementById(objectID);      object.style.top = newTop + 'px';      object.style.left = newLeft + 'px'; } </script> <style type="text/css" media="screen"> body {      font: 1em Georgia, "Times New Roman", times, serif;      color: #000;      background-color: #ccc;      margin: 8px; } #object1 {      padding: 4px;      background-color: #fff;      border: 2px solid #f00;      position: absolute;      z-index: 3;      top: 100px;      left: 150px;      width: 210px; } </style> </head> <body> <div  onclick="moveObject('object1', 50, 300);">      <img src="/books/3/292/1/html/2/alice04.gif" alt="alice" height="298" width="200" />      <h1>Click Me!</h1> </div> </body></html>

var object =

Create a variable called object to store the address for the object.

document.

Begin by identifying the object's location. If you're addressing an object on the same page, simply use document followed by a period. If you're addressing an object in a different window, begin with window, and then type the window's name and include a period after it. If you're addressing an object in a different frame, use top. or parent., followed by the frame's name and a period.

getElementById(objectID);

Add getElementById and then, in parentheses, add the ID of the object. The ID can either be the exact object ID in quotes ('object1') or a string variable that is storing the object ID name, as in this example.

If there is no element with that ID, then this function returns a value of null.

object.style.top = newTop + 'px';

To change an attribute of the object, use the object variable with a period after it and then the name of the attribute to be changed. If it's a CSS attribute (for example, top), you'll also need to include style. before the attribute name.

onclick="moveObject('object1', 50, 300)"

In your HTML, create the object by giving an HTML tag the appropriate ID attribute and an event handler to trigger the function from Step 1.

Tip

Notice that to assign a value to top or left, we had to add + 'px' to the code when assigning the values. To be DOM compliant, all style values must be assigned as strings because CSS requires units be specified with lengths. This is an easy way to turn the number into a string. If your DHTML code doesn't seem to be working, check to make sure that you translated all numeric values into strings.

Getting an Element's Attribute's Value by its Tag Name

Although not as directly useful as the getElementById() method, the getElementsByTagName() method (Figure 12.12), when coupled with the getAttribute() method, lets you find the value of any attribute in any tag on the page without having to know its ID.

Figure 12.12. The general syntax for using the `getElementsByTagName()` function.

In this example (Figure 12.13), we will be using getElementsByTagName() and getAttribute() methods to find the ID values of <div> tags on the page, which is extremely useful if you are generating pages dynamically.

Figure 12.13. When the visitor clicks the image, the ID for that object is displayed in an alert.

To get an element's attribute's value by its tag name:

function findAttributeValue (tagName, attributeName) {. . .}

Add a function to your script (Code 12.5). In this example, we will be creating a simple script called findAttributeValue() that will take a tag name and an attribute name and find the value of that attribute in that tag.

Code 12.5. Using the `getElementsByTagName()` function, you can find the value of any property of any tag on the page, including the IDs.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Getting an Element | By Tag Name</title> <script type="text/javascript"> function findAttributeValue(tagName, attributeName) {      var object = document.getElementsByTagName(tagName);      for (var i = 0; i < object.length; i++) {      alert(object[i].getAttribute (attributeName)); } } </script> <style type="text/css" media="screen"> body {      font: 1em Georgia, "Times New Roman", times, serif;      color: #000;      background-color: #ccc;      margin: 8px; } #object1 {      padding: 4px;      background-color: #fff;      border: 2px solid #f00;      position: absolute;      z-index: 3;      top: 100px;      left: 150px;      width: 210px; } </style> </head> <body> <div  onclick= "findAttributeValue('div', 'id');">      <img src="/books/3/292/1/html/2/alice04.gif" alt="alice" height="298" width="200" />      <h1>Click Me!</h1> </div> </body></html>

var object =

Create a variable called object to store the array of objects for that particular element. There will be one object for every instance of the tag in the document, but remember, arrays always start with 0, so if there are six instances of the tag on the page, the array will run from 0 to 5.

document.

Begin by identifying the object's location. If you're addressing an object on the same page, simply use document followed by a period. If you're addressing an object in a different window, start with window., followed by the window's name and a period after it. If you're addressing an object in a different frame, use top. or parent., followed by the frame's name and a period.

getElementsByTagName(tagName);

Add getElementsByTagName and the tag name in parentheses. This can either be the exact tab name in quotes ('div') or a string variable that is storing the tag name, as in this example.

If there are no tags with that tag name on the page, then this function returns a value of null.

for (var i = 0; i < object.length; i++) {. . .}

Add a loop that starts at 0 and will loop for the same number of instances as there are of the tag in question (object.length). This allows you to look at each tag individually.

object[i].getAttribute(attributeName);

In the loop, now reference the object array using the i variable along with the getAttributes() function, feeding it the name of the attribute you are looking for.

In this example, each time an instance of the tag is found, an alert will appear, showing the value of the attribute for that instance. So, the more instances of the tag, the more alerts that will pop-up.

onclick= "findAttributeValue ('div', 'id');"

In your HTML, create the object by giving an HTML tag the appropriate ID attribute and an event handler to trigger the function from Step 1. Although the ID is not required here, it helps to see how the code works.

Getting an Element by its ID

Figure 12.9. The general syntax for using the getElementById() function, your guide for attaching JavaScript to elements on your Web page.

Figure 12.10. When the page first loads, the object is in one position until the visitor clicks it.

Figure 12.11. The object is moved from its original position, across the screen in response to the function that addresses the object using the getElementById() function.

Code 12.4. Using the getElementByID() function, you can find and manipulate the properties of any element that has an ID assigned to it on the page.