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.
down() method covered in the first article of this series.<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.
<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.
<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.
<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>