Broad Network


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

This is part 3 of my series, DOM Document Object. In this part of the series, we look at DOM Document methods that can be used to change the attributes of html elements. I assume, you have read the previous parts of the series; this is a continuation.

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>

There are six input elements in the above code: three text input elements and three radio input elements. If you tried the above code, you would have noticed that all the six input tag elements received borders. If you want tag name elements of a particular type to be affected, then you have to use the type attribute in an if-construct. Read and try the following example that changes only the borders of the input controls of the radio element type:

<!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>

Comment on the getElementsByTagName() Method
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 Design
Web Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT

Comments

Become the Writer's Fan
Send the Writer a Message