Commonly Used HTML Attributes in DOM 5
DOM5 HTML - Part 3
Forward: In this part of the series we look at non-Boolean and global attributes that you are likely to use with the DOM.
By: Chrysanthus Date Published: 26 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
The href Attribute of the a Element
The href attribute of the a element is an attribute you might want to change at rum time. The following code sets the href value of an a element at run time:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<a href="http://www.mysite.com/file.htm" id="A1">Example Link</a>
<script type="text/ECMAScript">
document.getElementById('A1').href = "http://www.yoursite.com/file.htm";
</script>
</body>
</html>
While the above page is displayed, move the mouse pointer over the hyperlink and you would see the new href value at the status bar or address bar, or some other indicator position, at your browser.
The a element has an attribute called the target attribute. One of the values of this attribute is “_blank”. When an a element has this attribute and value, if you click it, the new page for the hyperlink will open in a new tab window. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<a href="page0.htm" target="_blank">Hyperlink</a>
</body>
</html>
You can change the value of the target attribute at run time. You can give it the value, “_top”. With this value, the new web page will open in the tab window of the previous web page that had the a element. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<a href="page0.htm" target="_blank" id="A1">Hyperlink</a>
<script type = "text/ECMAScript">
document.getElementById('A1').target = "_top";
</script>
</body>
</html>
You can set the image alt and src attributes at run time. Read and try the following code with your own image:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<img id="I1">
<script type="text/ECMAScript">
document.getElementById('I1').src = "pic.png";
document.getElementById('I1').alt = "Illustration";
</script>
</body>
</html>
For my browser, the alt attribute was not set. This is a weakness of my browser.
The title Attribute
The title attribute is a global attribute. This means it can be used by any element: Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p title="Simple Text" id="P1">A paragraph.</p>
<script type="text/ECMAScript">
document.getElementById('P1').title = "Special Paragraph";
</script>
</body>
</html>
The id attribute is a global attribute: Read and try the following code, which changes the id:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p title="Simple Text" id="P1">A paragraph.</p>
<script type="text/ECMAScript">
document.getElementById('P1').id = "P2";
document.getElementById('P2').title = "Special Paragraph";
</script>
</body>
</html>
The tabIndex Attribute
This attribute is used for focusing. Read and try the following code, where the script changes the focusing order at run time.
<!DOCTYPE HTML>
<html>
<body>
<a href= "url1" tabIndex="5" id="A">One</a> <br>
<a href= "url2" tabIndex="9" id="B">Two</a> <br>
<a href= "url3" tabIndex="7" id="C">Three</a> <br>
<a href= "url4" tabIndex="12" id="D">Four</a> <br>
<script type="text/ECMAScript">
document.getElementById('A').tabIndex = "1";
document.getElementById('B').tabIndex = "2";
document.getElementById('C').tabIndex = "3";
document.getElementById('D').tabIndex = "4";
</script>
<body>
</html>
The audio element has the src attribute. The value of this attribute can be set in the same way as in the above cases. The audio element has the Boolean attributes, which are autoplay, loop, and controls. We shall see how to set these and other Boolean Attributes in a later chapter.
Video Element Attributes
The video element has the src, audio and poster attributes. The values of these attributes can be set in the same way as in the above cases. The video element has the Boolean attributes: autoplay, loop, and controls. We shall see how to set these and other Boolean Attributes in a later chapter.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT