Getting and Setting HTML Attributes and Contents in DOM 5
DOM5 HTML - Part 2
Forward: In this part of the series, we see how to get and set the values of attribute and contents of html elements, while the web page is displayed.
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.
Getting a Value
To get a value of an attribute, simply means the script has to read the value as we saw in the previous part of the series. In this section, what you are learning new is the vocabulary, “get”. You should use this word when conversing with other DOM (ECMAScript) programmers. The following code is one of the samples we saw in the previous part of the series. The expression, document.getElementById('A1').href; gets the value of the href attribute and assigns it to the variable, attributeValue. The alert function call displays the value of the attributeValue attribute, which is the value that was gotten.
<!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">
attributeValue = document.getElementById('A1').href;
alert(attributeValue);
</script>
</body>
</html>
When you type an HTML element in a web page, you do not type many attributes for the element. If you then use DOM to get (read) the value of an attribute that was not typed, you will obtain an empty string, that is, "".
Read and try the following code, which attempts to get the value of the title attribute that does not exist (no title attribute and value was typed for the paragraph element):
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p id="P1">text text text text</p>
<script type="text/ECMAScript">
tit = document.getElementById('P1').title;
alert(tit);
</script>
</body>
</html>
The display of the alert box was blank, representing the empty string, "". An attempt to read the value of the title attribute of the paragraph element was made. There is no such title attribute, so an empty string was returned. In the following code, the title attribute exists and the alert box displays the value of the title attribute. Read and try it:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p id="P1" title="Special Paragraph">text text text text</p>
<script type="text/ECMAScript">
tit = document.getElementById('P1').title;
alert(tit);
</script>
</body>
</html>
Whether an attribute exists or not for an element, DOM can provide it. Whether the value of an attribute is present (empty) or not, DOM can provide it. All you do is just to set the value as in the following statement:
document.getElementById('P1').attribute = value;
The left hand side of this statement, accesses the elements attribute using the ID of the element. The right hand side assigns the value to the attribute. If the attribute did not exist, it is created. This is how you change the value of an attribute using DOM, and the effect will immediately take place in the browser. It does not matter whether the attribute existed or not; it does not matter whether the attribute was coded and its value was empty; it does not matter whether the attribute was coded and had a value; the result is a new value on the attribute, with immediate effect. Read and try the following code, which gives the title attribute and value to a div element that did not have the title attribute:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<div id="D1">text text text text</pdiv>
<script type="text/ECMAScript">
document.getElementById('D1').title = "Special Division";
</script>
</body>
</html>
While the web page for the above code is displayed, move the mouse pointer over the div and note that the title tooltip appears, meaning that both the title attribute and its value have been given at run time; the title attribute was not hard coded.
So, to set an attribute, you access the attribute through its element, using the ID of the element, and then, assign the new value. Generally, the value assigned is in double quotes.
You can get and set the content of an html element in the above ways, but the attribute to use is innerHTML. Read and try the following two code samples:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>for the paragraph; <span id="S1">for spanning</span>; for the paragraph</p>
<script type="text/ECMAScript">
sPContent = document.getElementById('S1').innerHTML;
alert(sPContent);
</script>
</body>
</html>
In the following code, the content of the span element is given (set) at run time; it is not hard coded:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>for the paragraph; <span id="S1"></span>; for the paragraph</p>
<script type="text/ECMAScript">
document.getElementById('S1').innerHTML = "for spanning";
</script>
</body>
</html>
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