PhpRiot
Become Zend Certified

Prepare for the ZCE exam using our quizzes (web or iPad/iPhone). More info...


When you're ready get 7.5% off your exam voucher using voucher CJQNOV23 at the Zend Store

Eight Weeks of Prototype: Week 2, How Prototype Extends Elements

Reading and Writing Element Attributes

An attribute is a part of the element that appears in the opening tag of the element. An element can have any number of attributes, each of which consists of a name and a value. For example, in the HTML snippet <a href="http://www.example.com">My Link</a>, the tag has one attribute, which is called href and has a value of http://www.example.com.

Prototype provides an easy way to read these attributes, as well as allowing you write your own attributes to any element in real-time. We will now look at how to read and write attributes, as well as covering some practical examples of doing so that you may use in the future.

To retrieve the value of an element attribute, the readAttribute() method is called on that element. Listing 7 shows an example reading the target URL of a hyperlink. This example will show just the URL (http://www.example.com) in an alert box.

In the fifth article of "Eight Weeks of Prototype", I'll show you how this can be useful when creating Ajax scripts that are accessible for non-Ajax users.

Note: In this example I have also made use of the down() method covered in the first article of this series.
Listing 7 Reading a hyperlink's URL with readAttribute() (listing-7.html)
<html>
    <head>
        <title>Reading a hyperlink's URL with readAttribute()</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="foo">
            <a href="http://www.example.com">This is a link</a>.
        </div>
        <script type="text/javascript">
            var link = $('foo').down('a');
 
            alert(link.readAttribute('href'));
        </script>
    </body>
</html>

To write new attributes (or to modify existing attributes), you can use the writeAttribute() method. This method takes two arguments, the first of which is the name of the attribute you want to write. The second argument is the new value of the attribute.

Listing 8 shows an example of retrieving a link, then updating its target URL and link text. When you click the link on this page you will be taken to www.phpriot.com, not www.example.com.

Listing 8 Using writeAttribute() to change the URL of a hyperlink (listing-8.html)
<html>
    <head>
        <title>Using writeAttribute() to change the URL of a hyperlink</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="foo">
            <a href="http://www.example.com">This is a link</a>.
        </div>
        <script type="text/javascript">
            var link = $('foo').down('a');
 
            link.writeAttribute('href', 'http://www.phpriot.com');
            link.update('Visit PhpRiot');
        </script>
    </body>
</html>

Being able to update an element's attributes is most useful when you want to use non-standard attributes. That is, if you use a particular attribute in your original HTML source, then you will not be able to validate the HTML page with a validator such as the W3C Markup Validation Service.

One such example is the target attribute, used on hyperlinks to force a link to open in a new window. If you use XHTML 1.0 Strict, the target attribute is not allowed. Therefore, by using writeAttribute(), you can add this attribute using JavaScript, thereby still allowing your HTML to validate. This is shown in Listing 9.

Note: Technically, the code below will not validate since the document type and encoding are not specified. I have done so in order to simplify the examples.
Listing 9 Changing a URL's target while not using non-standard attributes (listing-9.html)
<html>
    <head>
        <title>Changing a URL's target while not using non-standard attributes</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="foo">
            <a href="http://www.example.com">This is a link</a>.
        </div>
        <script type="text/javascript">
            var link = $('foo').down('a');
 
            link.writeAttribute('target', '_blank');
        </script>
    </body>
</html>

Another example of using writeAttribute() is to disable the auto-completion feature used by some browsers to provide you with suggestions when filling out forms, based on what you've entered in the past. In some situations you will want to force the browser not to use auto-completion on a particular input.

One way to disable auto-completion is to use autocomplete="off" in your HTML source (that is <input type="text" name="some_name" autocomplete="off" />). The problem with this is that autocomplete is not a standard attribute. Hence, you can use writeAttribute() to disable auto-completion instead, as shown in Listing 10.

Listing 10 Disabling auto-completion by using writeAttribute() (listing-10.html)
<html>
    <head>
        <title>Disabling auto-completion by using writeAttribute()</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="foo">
            <input type="text" name="q" />
        </div>
        <script type="text/javascript">
            var input = $('foo').down('input');
 
            input.writeAttribute('autocomplete', 'off');
        </script>
    </body>
</html>

In This Article