DOM Document Object Properties
DOM Document Object – Part 3
Forward: In this part of the series, we look at DOM Document methods that can be used to change the attributes of html elements.
By: Chrysanthus Date Published: 31 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 getElementById() method
We have seen this a lot in this volume. To access any html document, you can begin with the following expression:
document.getElementById('ID')
The word, document, here refers to the document object. getElementById() is a method of the document object. We have seen properties of the document object in the previous parts of the series. We have seen many examples of the use of the getElementById() method (function).
The getElementsByTagName() Method
In a web page you can have many elements with the same tag names especially in a form. In a form, you can have many elements with the input tag name. Another set of elements you can have with the same tag name is the set of a elements, with tag name, a. When using the getElementsByTagName() method, the tag name goes into the parentheses in quotes.
Read and try the following code, which gives borders to elements with the input tag name:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<form method="post" action="url">
<p><label>Customer name: <input name="custname"></label></p>
<p><label>Telephone: <input type="tel" name="custtel"></label></p>
<p><label>E-mail address: <input type="email" name="custemail"></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type="radio" name="size" value="small"> Small </label></p>
<p><label> <input type="radio" name="size" value="medium"> Medium </label></p>
<p><label> <input type="radio" name="size" value="large"> Large </label></p>
</fieldset>
</form>
<script type="text/ECMAScript">
collectn = document.getElementsByTagName('input');
arraySize = document.getElementsByTagName('input').length;
for (i=0; i<arraySize; i++)
{
collectn[i].style.border = "4px solid blue";
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<form method="post" action="url">
<p><label>Customer name: <input name="custname"></label></p>
<p><label>Telephone: <input type="tel" name="custtel"></label></p>
<p><label>E-mail address: <input type="email" name="custemail"></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type="radio" name="size" value="small"> Small </label></p>
<p><label> <input type="radio" name="size" value="medium"> Medium </label></p>
<p><label> <input type="radio" name="size" value="large"> Large </label></p>
</fieldset>
</form>
<script type="text/ECMAScript">
collectn = document.getElementsByTagName('input');
arraySize = document.getElementsByTagName('input').length;
for (i=0; i<arraySize; i++)
{
if (collectn[i].type == "radio")
{
collectn[i].style.border = "4px solid blue";
}
}
</script>
</body>
</html>
In the past, each html element was identified by a name attribute (and value). Today, you use the id attribute (and value) to identify each element. However, you still must use the name attribute (and its value) for the form controls. It is the form name attributes and values that are sent to the server. Form controls can also have ID attributes (and values).
If you make a mistake in your web page and give the same name to more than one element, then you can use the getElementsByTagName() method to have a collection of all the elements. In good programming, you should avoid mistakes, redundancy and ambiguity. So I will not address the getElementsByTagName() method any further.
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